Fullcalendar combined with bootstrap-datepicker - javascript

I'm try to update fullcalendar event after user change date from bootstrap-datepicker: http://bootstrap-datepicker.readthedocs.org/en/latest/events.html
I'm following the (only) solution found here: How to combine jquery date-picker and jquery full calendar
which for bootstrap-datepicker would be:
$('#fullcalEventEnd').datepicker().on('changeDate', function(evt){
var endDate = evt.date;
list.eventUpdated.end = moment(endDate).format("DD-MM-YYYY");
$(cal).fullCalendar('renderEvent', list.eventUpdated, true);
});
What it should do is, update an event created once the user selects the calendar, so on my select function i have:
select: function(start, end) {
$('#fullcalEventFrom').datepicker('setValue', start);
$('#fullcalEventTo').datepicker('setValue', end);
list.eventUpdated = {
title: eventTitle,
start: start,
end: end
};
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); // stick? = true
$(cal).fullCalendar('updateEvent', event);
},
....
list is my global object: var list = {}
But so far nothing, I'm not able to update the event and this line
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); is giving me an error and I don't understand why
Anyone already face this problem?

Related

Get date of selected slot using fullCalendar control

I have some code where I am trying to grab the date as it relates to the slot selected by a user. I have tried this code and it doesn't work:
$('.fc-agenda-axis.fc-widget-header').on('mousedown', function (e) {
var clickedTime = $(this).parent().find('th').html();
// line below returns undefined
var clickedDate = $('#calendar').fullCalendar('getDate');
// and so does this
var clickedDate2 = $('calendar').fullCalendar('getDate');
someOtherCoolMethod(clickedDate, clickedTime);
});
Any idea why the first attempt to get the date doesn't work?
Additional Info: I am using the agendaDay view, and the version of fullCalendar is 1.5.4 - we will be upgrading to a later version this year.
You have to use eventClick.
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
alert('Event start: ' + calEvent.start);
}
});
If it's no event you can use dayClick.

fullCalendar will not render events from variable array

I have events formatted and in a variable named events as follows (3 events listed, each with title, start ,end)
[
{title : 'workout', start : '2018-01-02T15:00:00', end : '2018-01-02T16:00:00'},
{title : 'workout3', start : '2018-01-04T15:30:00', end : '2018-01-04T16:30:00'},
{title : 'workout', start : '2018-01-03T1:30:00', end : '2018-01-03T1:50:00'}
]
When I pass the events variable to the calendar using events: events, the events are not displayed.
In JavaScript, if I simply alert the variable events to the screen and copy/paste it into my code as the events variable, the events all appear in the calendar correctly.
Why would the same exact data in the same exact format not appear in the calendar? How can I get the data in the variable to render?
Code:
$(document).ready(function() {
var events1 = [];
$('#caltable tbody>tr').each(function () {
table_row_data = [];
$('td', this).each(function () {
table_row_data.push($(this).text());
});
if (table_row_data.length > 0) { // Only add a row if it's not empty
events1.push("{"+table_row_data+"}");
}
});
var events = "["+events1+"]"
alert(events);
I'm assuming you have problems adding events after an async call.
Because initializing the fullcalendar works perfectly using the following:
$('#calendar').fullCalendar({'events': [...]});
For async calls, you can attach the event addEventSource to add events programmatically.
Take a look at this code snippet:
let myEvents = [{
title: 'event1',
start: '2018-01-01'
},
{
title: 'event2',
start: '2018-01-05',
end: '2018-01-07'
},
{
title: 'event3',
start: '2018-01-09T12:30:00',
allDay: false // will make the time show
}
];
$('#calendar').fullCalendar();
//Simulate an async call
setTimeout(function() {
$('#calendar').fullCalendar('addEventSource', myEvents);
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.js"></script>
<div id='calendar'></div>
I had the same problem because I was using momentJS objects for the event time ('start'/'end') and it has to be convert it to ISO string (exemple: moment(startTime).toISOString()) to make it work.
Hope it helps

How to prevent event overlapping when updating existing events in Full Calendar?

I have used eventOverlap: false, and selectOverlap: false, to prevent the user from overlapping events. However, I am trying to prevent the user from overlapping existing events.
In my full calendar the user can click on an event, which opens a pop up dialog and allows the user to update the date/time of the selected event. However, the user is able choose a date/time where an event is already booked. Therefore, I want to have a validation on the Save button that checks if the updated date/time has an event or not before any changes are made. These two screen shots show this problem graphically.
1. Shows that event time is being updated. 2. Shows the event is overlapping after it has been updated
var events = []; //global array where all the events are stored
function FetchEventAndRenderCalendar() {
//fetch info from database and add it to the events array
events = [];
$.ajax({
type: "GET",
url: "/SessionScheduler/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
id: v.Id,
title: v.Title,
description: v.Description,
start: moment(v.StartDate),
end: moment(v.EndDate),
tutorName: v.TutorName,
color: v.ThemeColour
});
})
//then display the calendar with the events
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
}
This is the Save button where I want to have a validation check. I have looked at this solution but this didn't work for me
$('#btnSave').click(function () {
//validation
var selectedStartDate = moment(document.getElementById('txtStart').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
var selectedEndDate = moment(document.getElementById('txtEnd').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
if (selectedStartDate > selectedEndDate) {
alert('Invalid end date');
return;
}
if (selectedStartDate.getTime() == selectedEndDate.getTime()) {
alert('Start/End dates can not be the same');
return;
}
var data = {
Id: $('#hdEventID').val(),
Title: $('#txtTitle').val(),
StartDate: $('#txtStart').val(),
EndDate: $('#txtEnd').val(),
Description: $('#txtDescription').val(),
TutorName: $('#txtTutorName').val(),
ThemeColour: $('#ddThemeColour').val()
}
SaveEvent(data);
})
SaveEvent function: Which saves the data
function SaveEvent(data) {
if (selectedEvent != null && confirm("Are you sure?")) {
$.ajax({
type: "POST",
url: '/SessionScheduler/SaveEvent',
data: data,
success: function (data) {
if (data.status) {
//refresh the calendar if the status is true else its failed
FetchEventAndRenderCalendar();
$('#myModalSave').modal('hide'); //hide modal dialog pop window
}
},
error: function () {
alert('Failed');
}
})
}
}
This function will check whether the event passed in overlaps with any other events currently displayed on the calendar.
Note this relies on the events having unique id properties, so it doesn't check itself. It also cannot, by its nature, check any events not currently displayed on the calendar, because fullCalendar doesn't return those from its clientEvents method. You should check again on the server-side before accepting the modification into your database.
//check whether or not the calendar event passed in overlaps with an existing event in the current (client-side) calendar data
//the first parameter should be the event which is being tested
//the second parameter should be a jQuery object wrapping the calendar HTML element
function isCalendarEventOverlapping(event)
{
var evts = cal.fullCalendar('clientEvents');
for (i in evts)
{
if (evts[i].id != event.id)
{
if (event.start.isBefore(evts[i].end) && event.end.isAfter(evts[i].start))
{
return true;
}
}
}
return false;
}
I did some search about this problem.
FullCalender check if selection days has an event?
How to check event is already exist for a day - fullcalendar
How to avoid events duplication on fullcalendar?
Can I prevent events with conflict time?
Everytime, they get all the events from the FC memory, and iterate over them, for searching conflict time.
Unfortunately, there is no simple solution for that.
My suggestions:
You should to make a ajax call before every modification, where your server checks the conflict (if you store the events on the server side)
If your server doesn't store your events, then you have to iterate all the events in the client side, in order to find a conflict.

Full calendar events default display shows start time

Using Fullcalender.js , i am showing events in calendar .
I added dayclick and event click funtionality. But when i use date.format() in dayClick (), it shows error date.Format() is not the function.
I upgraded my fullcalendar to v3.5.1 , after that i can get dayClick functionality very well. But the events showing Start time as default even if im not giving any title to it.
$(document).ready(function() {
$('#ConfCalendarBlock').fullCalendar({
height:400,
editable: true,
events: modJs.getConfJsonUrl(),
loading: function(bool) {
if (bool) $('#loadingConfCalendarBlock').show();
else $('#loadingConfCalendarBlock').hide();
},
dayClick: function (date, jsEvent, view) {
modJs.getdayclick(date.format());
},
eventClick: function(calEvent, jsEvent, view) {
modJs.getEventClcik(calEvent.id);
},
});
});
in my php code
public function listToEvent($book){
$event = array();
$starttime = date("g:i a", strtotime($book->from_date));
$endtime = date("g:i a", strtotime($book->to_date));
$event['id'] = $book->id;
$event['title'] = $starttime."-".$endtime. " (".$book->type.")";
$event['start'] = $book->from_date;
$event['end'] = $book->to_date;
$eventBackgroundColor = "";
$event['color'] = $eventBackgroundColor;
$event['backgroundColor'] = $eventBackgroundColor;
$event['textColor'] = "#FFF";
return $event;
}
Calendar shows the event as
9:15a 9:15am - 10:30am (Meeting)
The start time shows twice ,but if i refer old version of Calendar, it shows as i want.
Even i didnt give any title to the event, then the calendar shows the start time as 9:15a in blue color event bar.
It seems you need to set displayEventTime to false

updating an event by dragging/dropping fullcalendar- Javascript

I'm using Fullcalendar for a project I'm developing ... I have only one feature left to be implemented, which is when an existing event is dragged from it's original position to another time or date. I would like to know how I get the current object information (title, new start time, old start time, id, url, etc), so I can update the database with the newer information ... which property from the Fullcalendar object do I use?
I implemented the drop property;
drop : function(date, allDay) {
// retrieve the dropped element's stored event object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't
// have a reference object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event `sticks`
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// if the 'remove after drop' checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so remove the element from the "Draggable Events"
$(this).remove();
}
},
but it's not doing what I wanted ...
Take a look at the Event Dragging and Resizing http://arshaw.com/fullcalendar/docs/event_ui/
I think what you are looking for the eventDrop callback.
Triggered when dragging stops and the event has moved to a different
day/time.
http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/
Example from arshaw's site:
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
alert(
event.title + " was moved " +
dayDelta + " days and " +
minuteDelta + " minutes."
);
if (allDay) {
alert("Event is now all-day");
}else{
alert("Event has a time-of-day");
}
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
});

Categories

Resources