I've been looking into the FullCalendar with the Scheduler plugin and i can't figure out how to remove the hours from the calendar. I'm only interested in only having the names of the weekdays, is it possible to do that?
Here is how the Calendar looks
I think you just need to make one slot span a whole day.
e.g.
slotDuration: { days:1 }
See https://fullcalendar.io/docs/slotDuration for documentation.
I just had to give it a 24 hour duration like this: slotDuration: '24:00:00'. I also change some the values of minTime: "00:00:00" and maxTime: "24:00:00" just to make sure it worked, but it doesn't seem relevant.
minTime: "00:00:00",
maxTime: "24:00:00",
slotDuration: '24:00:00',
nowIndicator: false,
Related
How to set first hour to 0 for fullCalendar on a week view? I use fullcalendar react component.
eventTimeFormat={{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
}}
This gives me an event time that looks like that: 24:30-02:30 but I want it to be 00:30-02:30. Maybe I can directly set value of this header? Or fullcalendar support it natively through some settings?
As an option I set locale to ru. It solves problem for me.
import ruLocale from '#fullcalendar/core/locales/ru';
<FullCalendar
locale={ruLocale}
/>
You can use #fullcalendar/moment plugin, and set
eventTimeFormat: 'HH:mm',
Problem: the time in fullcalendar month view is displayed as 12h+am/pm. If you change the locale to spanish, it changes to H (without minutes)
I want to show it always, for all locales, as H:mm. In all the previous answers I found to this same question, the solution is use the option timeFormat: "H:mm", but it doesn't seem to work in fullcalendar v.4.2 (current). This is what I tried:
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
axisFormat: "H:mm",
timeFormat: "H:mm"
}
Here is a fiddle showing the problem: http://jsfiddle.net/mariavilaro/esxrb8mw/2/
Any tip for acomplishing this?
I just found the solution just before hitting the submit button. In fullcalendar v.4 the correct option for the time format is eventTimeFormat, so this would be the correct code for showing the time as H:mm:
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: false
}
I updated the fiddle.
I'm using Fullcalendar and I need to show all the current year plus the next two month of the next year using a timeline view.
If I use the visibleRange option in this way:
visibleRange: function (currentDate) {
return {
start: currentDate.year()+'-01-01',
end: currentDate.year()+1 + '-02-28',
};}
The calendar show the correct period but the navigation button 'next' stop working.
I also tried to use the duration option instead but I don't know how to set the "start" period.... the calendar start always at current date.
I think there is a solution that not require the writing of a full custom view to do so.
The solution to this involves setting the dateIncrement value - this tells the next/prev buttons how far to increase/decrease the visible dates by when you customise the view range like this.
Here's an example. N.B. I've used momentJS's built-in functions, rather than string concatenation, to provide a more robust and neater way of setting the visible range. It's probably also a good idea to set the slotDuration to something that won't produce a massive long calendar. I've used a 1 month duration as an example, but obviously you can configure it to whatever you need.
$('#calendar').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: { months: 1 },
dateIncrement: { years: 1 },
visibleRange: function (currentDate) {
return {
start: currentDate.clone().startOf('year'),
end: currentDate.clone().startOf('year').add({ years: 1, months: 2}),
};
},
//...etc
});
The dateIncrement setting is documented here: https://fullcalendar.io/docs/current_date/dateIncrement/
I have used bootstrap thai date picker. when i select my year range it show beyond.
the below image shows the year range from 2560-2569, but my date picker years starts from 2553.i duno where i went wrong.
$("#datepicker").datepicker({
format:'dd/mm/yyyy',
endDate: '+0d',
autoclose: true,
todayHighlight:false
});
can i know what option will make this to work
Make sure your using the current version 1.6.4 as found at the following link
https://uxsolutions.github.io/bootstrap-datepicker/
And I didn't need to specify highlight today as false.
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
endDate: "+0d",
autoclose: true,
startDate: '+543y'
});
Hope this helps!
how to define custom week range in Full Calendar. For example currently it is given 7 days week like 'Sun','Mon','Tue','Wed','Thu','Fri','Sat'. but i want to display 14 days week like 'SunA','MonA','TueA','WedA','ThuA','FriA','SatB','SunB','MonB','TueB','WedB','ThuB','FriB','SatB'.Is there any property by which i can set my week range days 14 without altering FullCalendar.js??
Apparently this is now possible with Custom Views:
http://fullcalendar.io/docs/views/Custom_Views/
If you'd like to take one of the existing view types, like "basic" or "agenda", but display it with a custom duration, like 4-days instead of the stock 1-week or 1-day, do something like the following:
$('#calendar').fullCalendar({
header: {
center: 'month,agendaFourDay' // buttons for switching between views
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
}
}
});
sounds like this is the issue you'd want to follow (not yet implemented):
http://code.google.com/p/fullcalendar/issues/detail?id=692