Develop Reference

Add another event source FullCalendar?

I try to add another event source on my FullCalendar. First, I get all events from manual function that I create own and I render all events using renderEvent function. But, I got error when I try to add another event source. So, I want to add holidays feature. I create another event source to get holidays date. That event was success to showed in my FullCalendar. But there is weird thing.
Example : If I have range of my holiday date, such as start : 2019/02/26 - end : 2019/02/28. The event content length doesn't 26 until 28, but start from 26 until 27.
What it's wrong? This is my code for to get all events.
// Get Agenda Data
function getEvents(datas) {
$("input[name=unitAgenda]").attr("value",
$("select[name=unit]").val());
var reUnit = datas.replace("- ","");
$('.calendar').fullCalendar('removeEvents');
$('.calendar').fullCalendar('refetchEvents');
$.ajax({
url: 'agendakerja/kalender/get_events',
dataType: 'JSON',
data: { unit: reUnit },
success: function(data) {
$.each(data["events"], function (index, event) {
$('.calendar').fullCalendar('renderEvent', event, true);
});
}
});
//passing unit name to function
global = reUnit;
}
And this is my code for get holidays date.
eventSources: [
{ url: 'agendakerja/kalender/get_holidays' }
]
Please help me!

Pass datepicker's date parameter to get resources in FullCalendar

My current calendar looks like this :
full-calendar design
What I'm trying to do is change calendar date when I click a date in datepicker ( which is already done using .fullCalendar('gotoDate',date ) ) , the thing is , to get the resources and events I need to re-send the query to the server with the new value of 'date' , otherwise the calendar won't reload the data.
Here's the url I'm using to get the resources :
resources:
{
url: '/general?handler=AllResources',
data: function () {
return {
// must return the new date to display in calendar
};
}
}
'AllResources' method only get a few records depending on the date specificied
as parameter.
BTW : I'm rendering fullCalendar in document.ready , then I have the following function to give my datepicker the 'changeDate' functionality :
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).on("changeDate", function (e) {
var date = moment(e.date);
$("#calendar").fullCalendar('gotoDate', date);
});

Im not sure if i unserstand your problem.
So if you change the date, the resources don't get updated?
Have a look at refetchResourcesOnNavigate
[edit]
Try this:
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).change(function (e) {
var mydate =moment($(this).val(),'DD/MM/YYYY').format('YYYY-MM-DD');
$("#calendar").fullCalendar('gotoDate', mydate);
});
And then when initializing the calender set 'refetchResourcesOnNavigate: true' to make sure whenever the calendar changes the resources get loaded again

JQuery autocomplete - Unable to set the source dynamically

I am trying to do the following. I have a date picker. When I select a date (during data change event), I am doing a ajax call to get data that I need to populate in a autocomplete drop down. When the page loads for the first time, the autocomplete box will be empty. As and when the date is changed or selected, the autocomplete box should populate accordingly. Please check my code below.
When I initiate the dataSrc variable, the drop down loads for the first time without any issues.
The issue that I am having is with the dynamic population, the data that I am fetching from the ajax call is not being set in the autocomplete source dynamically.
Please advice.
var dataSrc = [];
$(document).ready(function() {
$("#dropdownselector").autocomplete({
source : dataSrc,
change : function(event, ui) {
$("#selector").val(0);
$("#selector").val(ui.item.id);
}
}).focus(function() {
$(this).autocomplete("search", " ");
});
$('#dateselector').on("changeDate", function() {
$.ajax({
type : "GET",
url : "../getDropDownData",
data : {
"dateSelected" : $('#dataSelected').val()
},
contentType : "application/x-www-form-urlencoded; charset=utf-8",
dataType : "json",
async : true,
cache : false,
success : function(data) {
dataSrc = JSON.stringify(data);
},
error : function(data) {
alert('There was an error while fetching data.')
}
})
});
});

dataSrc = JSON.stringify(data); replaces what dataSrc points to. It does not change the original array element that was given to the autocomplete.
You could try pushing all the elements from the data into the dataSrc, which would cause the array that dataSrc originally pointed to, to not change, but get new values.
Or if that does not work, you may have to use the https://api.jqueryui.com/autocomplete/#method-option method to change the source option for the autocomplete.
$("#dropdownselector").autocomplete( "option", "source", data);

Inner your success function you need to destroy the old autocomplete and redraw it. Maybe, you need to create a function to create the autocomplete ('drawAutocomplete').
...
success : function(data)
{
dataSrc = JSON.stringify(data);
$( "#dropdownselector" ).autocomplete( "destroy" );
drawAutocomplete();
},
...

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.

how to make onclick event when clicking the date from datepicker UI

hi guys i have try to make a select data function with jquery with onclick event that have triggering the date from datepicker.
i have try to make a code but seems not work at all.
this is the textboxt id's that contain the datepicker call function. $(#date)
i have try to make a code for selecting my data.
this is the code.
$(document).on('click','#date',function(e) {
var data = $("#form_input10").serialize();
$('#table_s tbody').empty();
$.ajax({
data: data,
type: "Post",
url: "../php/termocouple/get_date.php",
success: function(data){
var list = JSON.parse(data);
for(var i = 0; i < list.length; i++){
$('#date1').val((list[i]['tanggal2']));
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
the condition when the datepicker running is like this. when the textbox clicked then the datepicker will be showing. nah when i use my code, the condition like this the 1st click is for show the datepicker that ( from this condition the textbox doesn't have any value of the date) the the datepicker showing and i select the date. i need do one click again on the textbox for showing my data.
please someone help me to solve this
please

Instead of trying to use a click event on the datepicker, you'd want to use one of the datepicker's available options. One is beforeShow, and allows you to have a function run before the datepicker opens up:
$( "#date" ).datepicker({
beforeShow: doThatThing
});
function doThatThing(){
var data = $("#form_input10").serialize();
$('#table_s tbody').empty();
$.ajax({
data: data,
type: "Post",
url: "../php/termocouple/get_date.php",
success: function(data){
var list = JSON.parse(data);
for(var i = 0; i < list.length; i++){
$('#date1').val((list[i]['tanggal2']));
}
}
});
}