I have started looking at the fullCalendar package but am seeing some unusual behavior when I first load.
I have it setup as follows:
<div id='calendar'></div>
<script>
// Create FullCalendar Object
$j('#calendar').fullCalendar({
height: 650,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
</script>
However when I first launch the calendar it appears as follows:
Where some of the properties do not appear to have been fully implemented:
Height seems to be being ignored.
Now Indicator is visible, but is stuck at the first moment of the current day.
Business Hours only seem to show in all-day, none of the times are shown.
The rest of the properties seem to have been picked up.
The strange thing then however is that if I navigate to the previous week (or any other place in fullCalender, it then renders correctly as follows:
Has anyone else experienced this behavior or have any suggestions on where to start looking. I am trying to implement this on quite a large system but am pretty sure I have all my JQuery loading before the fullCalendar.js file.
do you have moment.js loaded before fullcalendar.js?
and check the versions are compatible.
the code snippet you have is working fine, I need to take a look at the businessHours var and AddWorkHours function to confirm that everything is fine.
if you check the example below you will see highlighted area (Monday - Friday start at 10AM to 6PM) that's the business hours in the example.
jQuery(document).ready(function($){
var businessHours = {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
};
$('#calendar').fullCalendar({
height: 666,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
function AddWorkHours(startDate, endDate){
alert('Selected Start Time is: ' + startDate);
alert('Selected End Time is: ' + endDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar-container">
<div id="calendar"></div>
</div>
Related
I want set current date visible first. But it isn't working.
Documentation https://fullcalendar.io/docs/view-object
var calendarAll = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'today',
center: 'prev,title,next',
right: 'month30,dayGridMonth,timeGridWeek'
},
initialView: 'month30',
views: {
month30: {
type: 'dayGridMonth',
buttonText: 'month30',
//activeStart: new Date(), //Not working
visibleRange: function(currentDate) {
var startDate = new Date(currentDate.valueOf());
var endDate = new Date(currentDate.valueOf());
startDate.setDate(startDate.getDate() - 1);
endDate.setDate(endDate.getDate() + 29);
return { start: startDate, end: endDate };
}
}
},
});
How can I fix it? Fullcalendar v5, without jquery.
The "month" view provided by fullCalendar does not have this flexibility - it always starts at the beginning of the month, like a traditional paper calendar.
IMHO it would be confusing to many users if it appeared differently.
Other types of view are more flexible - they will respond to the visibleRange setting if you do not specify the time range in the view name, such as if you specify timeGrid rather than timeGridWeek for example.
Change type: 'dayGridMonth' to type: 'dayGrid'
In Fullcalendar, when setting the parameters
mintime
and
maxtime
the Now() indicators is not positioned properly.
I have a JSFiddle to show the issue.
In this Fiddle I would expect the indicator at the current date and time, however it is positioned at the top of the column of "yesterday"
Below is the code used in the fiddle
HTML
<div id="calendar"></div>
Javascript
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
height: 600,
nowIndicator: 'true',
minTime: "20:00:00", // this makes the calendar start at 8PM
maxTime: "44:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
})
Removing the
minTime
and
maxTime
parameters, makes the Now indicator position properly, as shown here
https://jsfiddle.net/8jndrp7m/2/
How can I position the Now indicator properly when using minTime and maxTime?
Or is this a bug?
i see multiple problems:
the now indicator doesn't need quotes, change 'true' to true,
If you want to extend the maxtime past midnight you can just put a 1. in front of the time, to set times the next day.So 8 in the morning on next day would be maxTime: '1.08:00:00'
If you start the calendar at 8 in the evening and its not 8pm yet (at least in my timezone) the now indicator will not show properly
The problem look like that you are set maxTime for next day which why it not working
If you like specify date to set max use validRange to set min & max date
$('#calendar').fullCalendar({
defaultView: 'agendaWeek', //agendaWeek
validRange: {
start: '2017-05-01',
end: '2017-06-01'
},
locale: 'nl',
timezone: 'local',
themeSystem: 'bootstrap3',
height: 600,
slotDuration: '00:10:00',
nowIndicator: 'true',
minTime: "17:00:00", // this makes the calendar start at 8PM
maxTime: "20:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
editable: true, // enable draggable events
droppable: true, // this allows things to be dropped onto the calendar
})
I've implemented the fullCalendar in week view. I have added few events in it. Now I am trying to duplicate those events in other weeks, on click of some external button. Follow is the screenshot of currently implemented fullcalendar:
As you can see that there is a button of duplicate, on top-right corner of fullcalendar. On click of it I need to get all the event of the week that is being displayed in this week.
Following is how I have initialized the fullcalendar:
$('#calendar').fullCalendar({
header: {
left: options["is_staff"] == true ? 'today prev,next' : '',
center: '',
right: '',
},
firstDay: 0,
editable: true,
selectable: true,
defaultView: 'agendaWeek',
weekNumbers: true,
eventOverlap: false,
events: events_data
})
Following is my script for button click:
$("#dup-week-schedule").click(function(){
var currentWeek = $.fullCalendar.formatDate($('#calendar').fullCalendar('getDate'), "W");
var currentWeekArray = [];
var currentWeekTitleArray = []; $.each($('#calendar').fullCalendar('clientEvents'), function(i,v){
if ((v['start'].isoWeek()) == currentWeek){
currentWeekArray.push(v);
currentWeekTitleArray.push(v['title']);
}
});
}
The issue is according the fullcalendar that is displayed in image, 22/04 should be included in current week. But it is being excluded from current week and the next sunday is being included in current week.
I am using latest version of the fullcalendar for my project. 3.1.0
I noticed that what I am trying to accomplish here actually used to work but then got broken in version 2.. of some kind.
Please see these fiddles for comparison.
Old version:
Fiddle that works
New Version:
Fiddle that doesn't work
Both fiddles above use this type of code to setup the title:
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
weekends:false,
Notice that in the working one, title adjusts correctly date wise, where none working one still lists saturday and sunday range
Could you please tell me what the changes are and why it got broken?
I think they were working on the fix, but is there anything I can do right now to fix the code?
Try this:
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'basicWeek',
weekends: false,
eventAfterAllRender: function(view) {
var firstDate = moment($('th.fc-day-header:first').data("date"));
var lastDate = moment($('th.fc-day-header:last').data("date"));
if (firstDate.month() == lastDate.month()) {
$('.fc-center').find('h2').html(firstDate.format('MMM') + ' ' + firstDate.format('D') + ' - ' + lastDate.format('D') + ', ' + firstDate.format('YYYY'));
} else {
//logic to show title for dates with different months / years
$('.fc-center').find('h2').html('');
}
}
});
Fiddle
This should be simple... using moment.js with Fullcalendar, I need to get the current time and add two hours to it.
In the select: method (or whatever you call it), I have:
select: function(start, end) {
The 'start' param contains the current time. End appears to contain the same thing. If I click to add an event, it details to current time to current time + 30 minutes. What I need to do is have the ending be current time + 2 hours. I've looked at the various docs and haven't found any references to doing something like that... so I'm blind (likely) or it's missing. Help please? :)
You can clone the start date and add 2 hours
http://jsfiddle.net/0fuhhh7v/1/
var end = start.clone().add(2,'hour');
For the select in fullCalendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
defaultDate: '2015-11-01',
selectable: true,
select: function (start, end) {
end = start.clone().add(2, 'hour');
alert('Time block is between ' + start.format() + ' and ' + end.format());
$('#calendar').fullCalendar('unselect');
},
editable: true
});