I have fullcalendar and which start from 2015 Jan, I want to start and show as default with current month and next month.
Please advice - I have below code
$('#calendar').fullCalendar({
theme: true,
//now: gotoDate(CurrentDate),//'2015-08-07',
editable: true,
aspectRatio: 2.1,
scrollTime: '00:00',
selectable: true,
selectHelper: true,
http://fullcalendar.io/docs/current_date/defaultDate/
Have you tried specifying a defaultDate?
Yes i did try defaultDate already, it wont work
I already have this
defaultView: 'timelineYear',
views: {
timelineDay: {
buttonText: ':10 slots',
slotDuration: '00:15'
},
timelineTenDay: {
type: 'timeline',
duration: { days: 10 }
}
},
and need to view current month and next month
Related
I know that time format issue has been already discussed. But stills i can't solve my problem.
My requirement looks like
Here I want to display all AM interval in a single AM and all PM time in a single PM.
Here is my code
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: "agendaWeek",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
format: 'DD/MM/YYYY',
});
});
replace format with this two line
timeFormat: "H:mm",
slotLabelFormat: "HH:mm",
I am using FullCalendar v3.9.0 and need to show rows if it has any events only for week and day view. Pleas see the below image:
As you can see, above calendar showing rows of 8 AM to 12 PM. but it only has events from 9 to 11 AM. Thus I just want to show calendar from 9 AM to 11 AM.
I have tried it using filterResourcesWithEvents: true, but it didnt worked. Please see my code below:
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev, title, next',
right: 'today, month,agendaWeek,agendaDay,listWeek'
},
views: {
agendaWeek: {
columnHeaderFormat: 'ddd D/M',
}
},
minTime: "08:00:00", //I have tried by commenting this as well.
maxTime: "23:00:00", //I have tried by commenting this as well.
defaultDate: output,
filterResourcesWithEvents: false,
slotEventOverlap : false,
contentHeight: 2000,
navLinks: false,
editable: false,
eventLimit: true,
height: "auto",
events: course_data,
defaultView: 'agendaWeek'
});
Looking hopefully to have some suggestions or answer, Thanks!!
For fullCalendar I have written the code below:
$('#mycalendar').fullCalendar(
{
allDaySlot:false,
slotDuration: '00:30:00' ,
//slotMinutes: '120',
lang: currentLangCode,
minTime: '4:00am',
maxTime: '24:00pm',
slotEventOverlap: true,
slotLabelFormat:'h(:mm)a',
showAgendaButton: true,
columnFormat: { month: 'ddd', week: 'ddd M/D', day: 'ddd M/D' },
timeFormat: 'H:mm',
defaultView: 'listWeek',
eventLimit: true,
theme:false,
editable: true,
contentHeight:'auto',
weekends: false ,
//timezoneParam: 'America/Los_Angeles',
//ignoreTimezone: false,
header:
{
left: 'prev,next today',
center: 'title',
// right: 'agendaWeek'
right: 'month,agendaWeek,agendaDay,listWeek'
},
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
month: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
}
},
I am getting below error for agendaWeek and agendaDay:
I am using:
jQuery JavaScript Library v3.3.1
FullCalendar v3.9.0
It's because your values for minTime and maxTime and invalid and not parseable as momentJS objects. fullCalendar relies on momentJS to do its date and time processing. Because of this the calendar does not know where to start the display (and thus where the "top" of the calendar is, hence the error message).
Set them to
minTime: '04:00',
maxTime: '24:00',
instead.
See here for a working demo: http://jsfiddle.net/sbxpv25p/581/
See http://momentjs.com/docs/#/parsing/string/ for a list of valid date/time formats which momentJS can recognise. You'll see that "am" and "pm" are not recognised items. In any case they are also unnecessary since you're already specifying the time in 24hr format.
I'm using fullcalendar v2.9.1 and I would like to show the calendar with slotDuration of '00:90:00' and maxTime: "22:00:00", minTime: "08:00:00".
But the calendar not show the hours in the left column.
When I removed the min/max time, I noticed that there is no hour of 8am, only 6:30 and 9:00 (because of slotDuration of 90 min).
Here's the settings:
views: {
agendaOneDay: {
type: 'agenda',
duration: { days: 1 },
// buttonText: '2 day',
weekends: false,
columnFormat: 'ddd M/D'
}
},
timezone: "local",
header: false,
height: calendarService.getCalendarHeightViaScreenSize(contact),
slotDuration: '00:90:00',
slotEventOverlap: false,
// slotLabelInterval: '02:00:00',
defaultView: device_type_mobile ? 'agendaOneDay' : 'agendaWeek',
eventBackgroundColor: 'white',
eventTextColor: '#3f51b5',
firstDay: 1,
weekends: false,
selectable: true,
eventOverlap: false,
selectOverlap: contact ? true : false,
editable: contact ? false : true,
maxTime: "22:30:00",
minTime: "08:00:00",
axisFormat: 'HH:mm',
allDaySlot: false
Can someone help me on this regard, please?
UPDATE:
I tried to use moment.js:
slotDuration: moment.duration('00:90:00'),
Even that, it's not working.
Thanks!
It's never too late...
On "maxTime:" | type "string" is not assignable
You need to write:
minTime: duration("hh:mm:ss"),
maxTime: duration("hh:mm:ss"),
Right now my Weekly Calendar shows up with one hour of interval. I'd like to know if it's possible to change this interval as I like (e.g 1hour30min interval).
My code to build the calendar:
$('#calendar').fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
});
Try out this
$("#calendar").fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
allDaySlot: false,
slotDuration: "01:30:00"
});
http://jsfiddle.net/5ax71o58/
You can set slotLabelInterval:
slotLabelInterval: "01:30:00"