fullcalendar populate calendar with events from a database

fullcalendar populate calendar with events from a database - javascript

I'm trying to use the fullcalendar by Adam Shaw version 2.2.5 to load events from the database but am not sure on how to do it. I've searched but haven't found a solution. I'm using chrome as a browser.
`$`('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
month: 'month',
week: 'week',
day: 'day'
},
events: function (start, end, timezone, callback) {
contentType: "application/json; charset=utf-8",
`$`.getJSON({
url: "WelcomeModels/Calendar/",
data: { Status: status, BranchNum: branchNumber, FromDate: fDate, ToDate: tDate, calendarMonth: '12', calendarYear: y },
type: "GET",
success: function (data) {
var events = [];
var obj = data;
//`$`.map(data, function (me) {
// me.title = data['BranchNum'] + ' - BOR - ' + data['Status'], // this is required
// me.start = moment(data['ReviewDate']).format(); // this is required
// })
`$`(data).find('event').each(function () {
events.push({
title: data.BranchNum + ' - BOR - ' + data.Status,
start: new Date(data.ReviewDate),
backgroundColor: "#0073b7", //Blue
borderColor: "#0073b7", //Blue
url: 'http://google.com/'
});
});
callback(events);
}
})
},
I expect it to show a calendar with my events but all I get is a calendar with no events.

Related

fullcalendar: Uncaught TypeError: Cannot read property 'nodeName' of null

After 3hours of searching, I couldn't find the answer to my problem.
I've created a fullcalendar V3 an now i'm updating to V5. I thought it will be easy but, no, its not easy at all for my actual level. (i've started to code at 4 months, i'm a really rookie).
So, the code that works:
<head>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
locale: 'fr',
defaultView: 'listWeek',
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
selectHelper: true,
//try to make data request from input
//see documents in Montauban/Calendar and try to modify this lignes
select: function(start, end, allDay) {
var title = prompt("Entrez l'evenement");
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: "insert.php",
type: "POST",
data: {
title: title,
start: start,
end: end
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement créé avec succès");
}
})
}
},
editable: true,
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert('Evenement mis a jour');
}
})
},
eventDrop: function(event) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
});
</script>
</head>
And the code that do not work with the follows errors:
Uncaught TypeError: Cannot read property 'nodeName' of null
Uncaught TypeError: calendar.FullCalendar is not a function at Object.success ((index):106) at c (jquery.min.js:2)at Object.fireWith [as resolveWith] (jquery.min.js:2)at l (jquery.min.js:2)at XMLHttpRequest. (jquery.min.js:2)
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'fr',
editable: true,
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
editable: true,
eventResize: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var title = event.title;
var id = event.id;
console.log('hey')
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert('Evenement mis a jour');
}
})
},
eventDrop: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
calendar.render();
});
</script>
</head>
In the first example (fulcalendar V3) everything works and the database its update when we "drop events, delete events". In the second example (fullcalendar V5), we can click and drop in the events, but the data base its not updated with the new info.
Can you please try to help me?
Sorry for my bad English. :)

JQueryFullCalendar using MVC

I am using MVC. I got the events from database and using jQuery to bind the data.
My event date from database is appearing as '2021-01-14 00:00:00.000'
Below is my code:
function fnGetHolidays() {
$.ajax({
url: siteRoot + "/Master/GetHolidays",
data: {
},
success: function (data) {
fnBindHolidayCalendar(JSON.parse(data.Holidays));
},
error: function (e) {
console.log(e);
},
complete: function (e) {
}
})
}
function fnBindHolidayCalendar(holiday) {
var initialLocaleCode = 'en';
if (culture == "ar-SY") {
initialLocaleCode = 'ar-sa';
}
var calendarEl = document.getElementById('dvHolidayCalendar');
var calendar = new FullCalendar.Calendar(calendarEl,{
header:
{
left: 'prev,next today',
center: 'title',
right: ''
},
locale: initialLocaleCode,
displayEventTime: false,
eventRender: function (event, element) {
element.qtip(
{
content: event.description
});
},
select: function (arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function (arg) {
fnEditHoliday(arg);
},
editable: false
});
var events = [];
$.each(holiday, function (i, data) {
var HolidayDate = data.HM_Date
events.push(
{
allDay: true,
id: data.HM_ID,
title: data.HM_Title,
description: data.HM_Title,
start: changeDateFormat(HolidayDate, 'dd/MM/yyyy', 'yyyy-MM-dd'),
end: changeDateFormat(HolidayDate, 'dd/MM/yyyy', 'yyyy-MM-dd'),
backgroundColor: "#006dff",
borderColor: "black"
});
});
calendar.addEventSource(events);
calendar.render();
}

FullCalendar does not render date for month and day view

Following Data is being passed about events:
[{"title":"my First Entry","start":"2016-09-27T11:47:00","end":"2016-09-27T12:47:00","allday":false}]
It renders entry only in month view. eventRender is also not fired for day and week
Javascript
var calendar = $('#calendar').fullCalendar({
editable: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost:8000/fetch",
// events: [
// {
// title: 'Lunch with All',
// start: new Date(2016, 9, 27, 12, 0),
// end: new Date(2016, 9, 27, 13, 0),
// allDay: false
// },
// {
// title: 'Birthday Party',
// start: new Date(y, m, d + 1, 19, 0),
// end: new Date(y, m, d + 1, 22, 30),
// allDay: false
// },
// {
// title: 'Click for Google',
// start: new Date(y, m, 28),
// end: new Date(y, m, 29),
// url: 'http://google.com/'
// }
// ],
// Convert the allDay from string to boolean
eventRender: function (event, element, view) {
var start = event.start;
console.log("Rendered");
var end = moment(event.end);
event.end = end;
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: false,
selectHelper: false,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/add_events.php',
data: 'title=' + title + '&start=' + start + '&end=' + end + '&url=' + url,
type: "POST",
success: function (json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: false
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: false,
eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
},
eventResize: function (event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:8888/fullcalendar/update_events.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (json) {
alert("Updated Successfully");
}
});
}
});
It works fine for all views if date is set in this format new Date(2016, 9, 27, 12, 0)

Load json data into .js file via ajax

I try to integrate a calendar template in my system.
At demo js file, example events are written like this:
events: [
{
id: 1,
title: 'Title 1',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 2,
title: 'Title 2',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
}
I need to get this data from mysql. I wrote the php script, it gives me the result at json format. But I don't know the way of loading results into .js file.
I know it's a simple question. Thanks for your time.
Here is the all .js file:
$(function() {
// fullcalendar
fullcalendar.calendar_selectable();
});
fullcalendar = {
calendar_selectable: function() {
var $calendar_selectable = $('#ajanda'),
calendarColorsWrapper = $('<div id="calendar_colors_wrapper"></div>');
var calendarColorPicker = helpers.color_picker(calendarColorsWrapper).prop('outerHTML');
if($calendar_selectable.length) {
$calendar_selectable.fullCalendar({
header: {
left: 'title today',
center: '',
right: 'month,agendaWeek,agendaDay prev,next'
},
buttonIcons: {
prev: 'md-left-single-arrow',
next: 'md-right-single-arrow',
prevYear: 'md-left-double-arrow',
nextYear: 'md-right-double-arrow'
},
buttonText: {
today: ' ',
month: ' ',
week: ' ',
day: ' '
},
aspectRatio: 2.1,
defaultDate: moment(),
selectable: true,
selectHelper: true,
select: function(start, end) {
UIkit.modal.prompt('' +
'<h3 class="heading_b uk-margin-medium-bottom">Etkinlik Ekle</h3><div class="uk-margin-medium-bottom" id="calendar_colors">' +
'Etkinlik Rengi:' +
calendarColorPicker +
'</div>' +
'Etkinlik:',
'', function(newvalue){
if($.trim( newvalue ) !== '') {
var eventData,
eventColor = $('#calendar_colors_wrapper').find('input').val();
eventData = {
title: newvalue,
start: start,
end: end,
color: eventColor ? eventColor : ''
};
//kaydediyorum
var datastring='do=kayit&title='+eventData.title+'&start='+(eventData.start)+'&end='+(eventData.end)+'&color='+(eventData.color);
$.ajax({
type: "POST",
data: datastring,
url: "script/ajax_calendar.php",
dataType: "html"
});
$calendar_selectable.fullCalendar('renderEvent', eventData, true); // stick? = true
$calendar_selectable.fullCalendar('unselect');
}
}, {
labels: {
Ok: 'Kaydet'
}
});
},
editable: true,
eventLimit: true,
timeFormat: '(HH)(:mm)',
events: [
{
title: 'Tüm Gün Aktivitesi',
start: ('2016-01-01')
},
{
id: 1,
title: 'Uzun Aktivite',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 1,
title: 'Saatli olan',
start: ('2016-01-07 15:00'),
color: 'brown'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(8, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(15, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
title: 'Konferans',
start: moment().startOf('day').add(14, 'hours').format('YYYY-MM-DD HH:mm'),
end: moment().startOf('day').add(15, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Meeting',
start: moment().startOf('month').add(14, 'days').add(10, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Lunch',
start: moment().startOf('day').add(11, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#d84315'
},
{
title: 'Meeting',
start: moment().startOf('day').add(8, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Happy Hour',
start: moment().startOf('month').add(1, 'days').format('YYYY-MM-DD')
},
{
title: 'Dinner',
start: moment().startOf('day').add(19, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Birthday Party',
start: moment().startOf('month').add(23, 'days').format('YYYY-MM-DD')
},
{
title: 'NEW RELEASE (link)',
url: 'http://themeforest.net/user/tzd/portfolio',
start: moment().startOf('month').add(10, 'days').format('YYYY-MM-DD'),
color: '#0097a7'
}
]
});
}
}
};

The easiest way is to change your php script to output the JSON data as a js variable.
// output the data like this
header("Content-Type: application/javascript");
$data = json_encode($data_array);
echo "var events_json = $data;";
exit;
Then include the php script as a javascript in your webpage, above the main code.
<script src="myScript.php"></script>
Then you can just use the variable name in your main javascript without loading anything async.
events: events_json

You could try this:
$(document).ready(function () {
var = 'test';
$.ajax({
type: "POST",
url: "yourservice.php",
data: {
var: var
},
success: function (response) {
console.log(response);
var decodedJson = JSON.parse(response);
console.log(decodedJson);
}
});
});

How to generate string using for loop in JQuery in ASP.net?

I have to generate a string in Jquery by looping the List as follows
events: [
{
title: 'All Day Event',
start: '2014-11-01'
},
{
title: 'Long Event',
start: '2014-11-07',
end: '2014-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-11-16T16:00:00'
},
{
title: 'Conference',
start: '2014-11-11',
end: '2014-11-13'
},
{
title: 'Meeting',
start: '2014-11-12T10:30:00',
end: '2014-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2014-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2014-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2014-11-12T17:30:00'
}
]
The list contain these elements but I'm unable to generate this kind of string .I've tried in two ways
for(var i=0; i<customers.length; i++)
{
"{"
"title:" +customers[i].Column1+","
"start:"+customers[i].Column3
"}"
if(i!=customers.length-1)
{
","
}
}
and
$.each(eventList, function (index, employee) {
{
title:employee.name,
start:employee.date
}
,
});
but I'm unable to get proper result please give me solution for this .To get list I'm using the following coe
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'ProjectedYieldCalender.aspx/GetData',
data: '{}',
success:
function (data) {
var eventList = data.d
eventList=demo(eventList);
initCalendar(eventList);
}
});
});
function initCalendar(eventList) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
//defaultDate: '2014-08-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
eventList
]
});
}
Thank you

Do you want all the events to be on a single event. Then this may help.
var string;
$.each(events, function() {
string += "{title:" + this.title + "start:" + this.start + "}" ;
});

Develop Reference

JavaScript is the programming language of the Web.

fullcalendar populate calendar with events from a database - javascript

Related

fullcalendar: Uncaught TypeError: Cannot read property 'nodeName' of null

JQueryFullCalendar using MVC

FullCalendar does not render date for month and day view

Load json data into .js file via ajax

How to generate string using for loop in JQuery in ASP.net?

Categories

Resources