Develop Reference

Fullcalendar Now() Indicator positioned wrongly

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
})

fullCalendar - Properties not being applied on first load

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>

How to get the events of current week in fullcalendar?

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.

Fullcalendar get calendar event created when clicking in agendaDay view

I'm using FullCalendar 3.2.0. When I go to the agendaDay view and click on a time slot, a new event is created automatically with a 30-minute duration by default. How can I have access to this event from the dayClick callback, so I can change its duration?
I'm implementing a page where you have a form that defines the duration of the event. You put the number of hours the event is going to last in an input and then you click on the agendaView of the calendar to create the event. In the dayClick callback, I get the start of the event and add to it the duration that was put in the input, then I render the event in the calendar. The result is that I get my rendered event overlapped by the automatically created one, like this:
I have to click outside the calendar to make the event disappear. I would like to prevent the automatic creation of the event in the first place or be able to change its duration when it is created and make it permanent, so it doesn't disappear when I click outside of the main calendar frame.
Here's my code:
$('#calendario').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: new Date(),
navLinks: true,
selectable: true,
selectHelper: true,
dayClick: function(day, evto, view) {
var txtDuration = $('#duration');
var hoursOrDays = $('#hoursOrDays');
if (view.name === "agendaDay") {
// Here, is it possible to get a reference to the automatically created event and change its end date,
// instead of creating a new one and rendering it?
createEvent('Available', day, calculateEndDate(day, parseInt(txtDuration.val()), hoursOrDays));
}
},
editable: true,
eventLimit: true
});
function createEvent(text, start, end) {
var calendario = $('#calendario');
var evento = {
title: text,
start: start,
end: end,
durationEditable: false,
resourceEditable: false
};
calendario.fullCalendar('renderEvent', evento);
}
function calculateEndDate(start, duration, hoursOrDays) {
var unit = hoursOrDays === 'D' ? 'days' : 'hours';
return start.clone().add(duration, unit);
}
Thanks for your help!

Pickadate.js does not open on click

after we've updated our pickadate from 3.5.4 to 3.5.6 the picker does not open on click. We are using the Date and the Time pickers, none of them shows up.
We're using different selectors like:
var options = {
format: 'HH:i',
editable: true,
interval: 30,
};
$('.worktime').pickatime(options);
or
$('#datepicker').pickadate({
labelMonthPrev: 'letzter Monat',
labelMonthNext: 'nächster Monat',
monthsFull: moment.months(),
weekdaysFull: moment.weekdays(),
weekdaysShort: moment.weekdaysShort(),
// Buttons
today: 'heute',
clear: '',
close: 'schließen',
// Formats
format: 'dd.mm.yyyy',
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
hiddenName: undefined,
// other
firstDay: 1,
selectYears: 4,
editable: true,
});
Even if I run the code above in the console, it doesn't work. Only the following shows the picker:
var picker = $('#datepicker').pickadate('picker')
picker.open()

After Version 3.5.4 the pickadate plugin is not binding any events when passing the "editable: true" parameter. We've had to bind the click and focus by ourselves in the new Version.

If your only change was the update Pickadate.js from 3.5.4 to 3.5.6, then open a ticket at https://github.com/amsul/pickadate.js/issues and fall back on 3.5.4.

event.stopPropagation() fixed it for me too