In the Week View, if I select a time period, how do I get the selected time, on the click of a button. Is there a function to call like, getTime or something?
I can get the selected day, by doing something like:
var start = $('#calendar').fullCalendar('getView').visStart;
however, not sure how to get the selected time.
I think the select callback works better than dayClick, because you can get the start date if a range of dates were selected.
select: function(startDate, endDate, allDay, jsEvent, view) {
// here startDate and endDate will give you the date-range selected
}
visStart property only keeps date object of the first visible day.
If you want get clicked date and time you may use dayClick event:
dayClick: function(date, allDay, jsEvent, view) {
//some code here
}
which has date as date object
Related
Is there a way to filter events based on a drop down?
I tried :
events: '/Controller/action?id='+id,
$("#drop").change(function () {
id = $('#drop').val();
$('#calendar').fullCalendar('refetchEvents');
But the controller does not see the new id.
Any suggestions on passing a paremter to the events() method?
You gave the result of '/Controller/action?id='+id to the calendar as the events feed when the calendar was initialised. e.g. you passed in /Controller/action?id=3, for example. That code has run and does not run again. fullCalendar stores that static string as the URL of the events feed. It doesn't pay any attention to the value of "id" later.
The simplest way to solve this is probably using a custom event feed, as per https://fullcalendar.io/docs/event_data/events_function/ :
//declare the calendar with a custom "events" functions
$("#calendar").calendar({
//..all your calendar options, and then the events:
events: function( start, end, timezone, callback ) {
$.ajax({
//whatever ajax parameters you need, but make sure:
url: /Controller/action,
data: { "id": $('#drop').val(), "start": start.format("YYYY-MM-DD"), "end": end.format("YYYY-MM-DD") }
});
}
});
$("#drop").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
That way, when "refetchEvents" is called, it runs the function that you passed as the "events" parameter, which can look up the value of the dropdown dynamically at that moment in time.
Note I've also added "start" and "end" parameters to your data, because your event source is supposed to filter the events returned by the dates actually being displayed on the calendar, otherwise you end up returning all events every time the view or date changes.
I have three fields created via ACF with Datepicker: event start date, event end date and survey start date.
What I want to achieve is when I set date via datepicker on event start date, then this date is copied to event end date and survey start date.
I googled almost everything and no code is working. Actually, the nearest working solution is below:
acf.add_action('load', function( $el ){
var $field_start_date = $el.find('.acf-field-5800010541984');
var $field_end_date = $el.find('.acf-field-5800014941985 .input-alt');
$field_start_date.change(function() {
var $field_start_date_value = $('#acf-field_5800010541984').val();
$('#acf-field_5800014941985').datepicker( 'setDate', $field_start_date_value );
});
Value is copied to another field (event end date) – attribute value is changing – but copied value doesn't show on input.
BTW, $('#acf-field_5800014941985').datepicker('update'); doesn't work too.
Like Leeloo in The Fifth Element – "Pleeeeeeeeeeeeeese. Heeeeeeeeeeeeeelp"
Best regards,
Milosz!
I'm using FullCalendar and it is working fine.
I allow users to drag events, but sometimes I need to force the event to start on a specific date. For example, some events MUST start on a Monday, so if a user drags it to a different weekday, I'll force the event move to the previous Monday.
So, on the eventDrop callback, I have something like:
jQuery('#calendar').fullCalendar({
...
...
eventDrop: function(event, delta, revertFunc) {
if (/*must force new event start date*/) {
var duration = event.end.diff(event.start, 'd');
event.start = moment('2015-07-01');
event.end = moment('2015-07-01').add(duration, 'd');
}
}
})
Some explaining:
I must calculate the original duration, because when I change the
start date, Fullcalendar assumes the end date is the same and changes
the event duration accordingly. So it forces me to assign a new end
date (is there another way to do this?)
assigning a new date to event.start works fine
assigning a new date to event.end always returns:
TypeError: Va.time is undefined
Am I missing something, or maybe overcomplicating things?
Is the error a bug?
Thanks in advance for helping me on this!
Just modify the existing moment like this:
eventDrop: function (event) {
event.start.day(1); //Move the startdate to day 1 (Monday, 0 = Sunday)
event.end.day(1); //Also move the enddate to Monday
}
jsFiddle
I'm not sure what causes the error. It looks like it has to be something to do with setting a new momentjs object in either the event.start or event.end.
I call the fullCalendar method as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
firstDay: 1,
eventLimit: true, // allow "more" link when too many events
events: [{title":"Matthias Klein","start":"01-01-2014","end":"01-01-2015"},{"title":"Matthias Klein","start":"01-01-2014","end":"02-01-2014"},{"title":"Matthias Klein","start":"01-01-2014","end":"01-01-2014"}]
});
});
But in the result all events starting and ending one day before at 2:46a:
see Image
What do I do wrong?
Few things,
Try changing your date format for your events to yyyy-mm-dd I had this issue last night where my events were all showing at 4;30pm the day before and this fixed it for me.
Also noticed your dates have no times so are they all day events? If so make sure you're setting the allDay property to true.
One last thing, firstDay means the day of the week, so if Monday is 0 then Tuesday is 1. It doesn't mean the first day of the month.
I had the same problem and was only able to solve it by following the EXACT date format given on the demo page...
yyyy-MM-ddTHH:mm:ss (for example 2019-05-08T16:00:00 is 4 o'clock today)
or
yyyy-MM-dd (for example 2019-05-08 is today)
In other words, U.S. date format plus 24-hour time format.
Unfortunately there does seem to be a bug with nextDayThreshold. If it's set to 00:00:00 (the default), events ending at this time will be displayed as having ended the day before, which contradicts the documentation. Also, allDay=true events spanning more than one day will always be displayed as ending on the previous day.
Here's my full code...
addEvents = [];
addEvents.push({
title: "First Event",
url: "http://localhost:11634/events/141",
start: '2019-05-19T09:00:00',
end: '2019-05-19T13:00:00'});
addEvents.push({
title: "Second Event",
url: "http://localhost:11634/events/137",
start: '2019-11-02',
end: '2019-11-02'});
addEvents.push({
title: "Third, multi-day event",
url: "http://localhost:11634/events/115",
start: '2019-11-08T00:00:00',
end: '2019-11-10T01:00:00'});
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
events: addEvents
});
calendar.render();
});
Another way to fix that: use nextDayThreshold parameter
$('#calendar').fullCalendar({
**nextDayThreshold**: '00:00:00', // 9am
nextDayThreshold set the minimum time it must be in order for it to render as if it were on that day.
I saw this issue and in my application it appears to be a timezone problem. When making the round trip to by database and back, the Date object appears to pick up timezone information, which screws up the calendar...
I would like to switch to a particular week when a User selects any date.
On selection of the date the full calendar will display the agenda week in which the week resides.
Please suggest how to do it.
Thanks
Prabhanjan
This should work, but I haven't tested it yet. Let me know how it goes...
dayClick: function(date){
$("#calendar").fullCalendar('changeView', 'agendaWeek')
.fullCalendar('gotoDate', date);
}
And if your using select there is a problem when trying to use both so this should work. Again, it is untested so let me know...
select: function(start){
// you may have to parse the date first aka. var start = Date.parse(start);
$("#calendar").fullCalendar('changeView', 'agendaWeek')
.fullCalendar('gotoDate', start);
}
As of version 2.3.1, fullCalendar does not let you chain commands. In order to achieve what you want is to call it twice.
dayClick: function(date){
$("#calendar").fullCalendar('changeView', 'agendaWeek');
$("#calendar").fullCalendar('gotoDate', date);
}
or
dayClick: function(date){
var $calendar=$("#calendar");
$calendar.fullCalendar('changeView', 'agendaWeek');
$calendar.fullCalendar('gotoDate', date);
}