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)
Related
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. :)
I just want to addclass name for bootstrap fullcalendar popover. I have tried the $(".popover").addClass('fc-ctpopover'); in below script in many places. Its not working for this code.
Comment for further clarification.
$(".popover").addClass('fc-ctpopover');
My expected output <div class="popover fc-ctpopover">
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 600,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay,
title: 'the title',
content: function() {
return $("#popoverContent").html();
},
template: popTemplate,
placement: 'left',
html: 'true',
trigger: 'click',
animation: 'true',
container: 'body'
},
true
);
}
calendar.fullCalendar('unselect');
},
eventRender: function(event, element) {
element.popover({
title: element.find('.fc-title, .fc-list-item-title').html() + '<span class="popover-title"><a data-toggle="popover" data-trigger="focus" class="close">×</a></span>',
placement: 'top',
html: true,
trigger: 'manual',
animation: true,
container: 'body',
content: function() {
setTimeout(function() {
element.popover('hide');
}, 20000);
return $('#popover-content').html();
}
}).on("mouseenter", function() {
$(".popover").addClass('fc-ctpopover');
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
});
},
eventAfterRender: function(event, element) {
$(".popover").remove();
element.popover('hide');
},
eventClick: function(event, element, view) {
//element.popover('hide');
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
},
editable: true,
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'This is a cool event'
}, {
title: 'Long Event',
url: 'http://stackoverflow.com',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2)
}, {
title: "Conference",
color: "#F6BB42",
start: "2019-06-04",
end: "2019-06-05"
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false
}, {
id: 999,
title: 'Repeating Event',
color: '#FB6E52',
start: new Date(y, m, d + 4, 16, 0),
allDay: false
}, {
title: 'Meeting',
color: "#DA4453",
start: new Date(y, m, d, 10, 30),
allDay: false
}, {
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
}
]
});
var popoverElement;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="calendar"/>
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.
I have a entity class as below:
public string Title { get; set; }
public string Description { get; set; }
public string StartDay { get; set; }
public string StartHour { get; set; }
public string EndDay { get; set; }
public string EndHour { get; set; }
public string Guid { get; set; }
and i send events of database as below in controller:
[HttpPost]
public JsonResult GetEvents()
{
var eventList = from q in _calendarRepository.Table
select new
{
id=q.Id,
title=q.Title,
description=q.Description,
startDate= q.StartDay,
startHour=q.StartHour,
endDate= q.EndDay,
endHour=q.EndHour,
guid=q.Guid
};
var rows = eventList.ToList();
return Json(rows, JsonRequestBehavior.AllowGet);
}
and in view i have fullcalendar implematation as below:
//create Guid
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
//ajax request that gets Dates from "Calendar" controller and "Bind" Action
var items = [];
$(document).ready(
$.ajax({
url: "/Calender/GetEvents",
type: 'Post',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
items = result;
console.log(items);
GetEvent();
},
})
);
//Calendar Main Script
function GetEvent() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end) {
//$('#modal-responsive').modal('show');
document.getElementById("event-title").value = null;
var title = null;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: start,
end: end,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
var title = document.getElementById("event-title").value;
var description = document.getElementById("field-3").value;
var startHour = document.getElementById("field-4").value;
var endDay = document.getElementById("toDate1").value;
var endHour = document.getElementById("field-6").value;
//start = document.getElementById("fromDate1").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
var uid = guid();
$.ajax({
url: "/Calender/Save",
type: 'Post',
data: {
Title: title,
Description: description,
StartDay: start,
StartHour: startHour,
EndDay: end,
EndHour: endHour,
EventGuid:uid
}
});
calendar.fullCalendar('renderEvent',
{
id:uid,
title: title,
start: start,
end: end
},
true // make the event "stick"
);
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
$('.fc-event-inner').uniqueId();
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"close": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: false,
events: items,
//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////Update Event////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////
eventClick: function (event, jsEvent, view) {
var title = event.title;
var EventStart = event.start;
var EventEnd = event.end;
//var eventAllday = event.allDay;
document.getElementById("toDate1").value = EventEnd;
$.ajax({
url: "/Calender/ToPersian",
type: 'Post',
data: {
start: EventStart,
end: EventEnd,
},
success: function (result) {
var startDate = result.SDate.substring(0, 11);
var startHour = result.SDate.substring(11, 23);
var endDate = result.EDate.substring(0, 11);
var endHour = result.EDate.substring(11, 23);
document.getElementById("fromDate1").value = startDate;
document.getElementById("field-4").value = startHour;
document.getElementById("toDate1").value = endDate;
document.getElementById("field-6").value = endHour;
},
});
$(function () {
$("#modal-event").dialog({
resizable: true,
height: "auto",
width: 800,
modal: true,
show: {
effect: 'fade',
duration: 350
},
hide: {
effect: 'fade',
duration: 50
},
buttons: {
"save": function () {
var title = document.getElementById("event-title").value;
var ndescription = document.getElementById("field-3").value;
var nstartHour = document.getElementById("field-4").value;
var nendHour = document.getElementById("field-6").value;
////////////////////////////////////////////////////////
$.ajax({
url: "/Calender/ToGregorian",
type: 'Post',
async: false,
data: {
start: document.getElementById("fromDate1").value + ' ' + document.getElementById("field-4").value,
end: document.getElementById("toDate1").value + ' ' + document.getElementById("field-6").value,
},
success: function (result) {
var mystart = result.SDate;
var myend = result.EDate;
start = mystart;
end = myend;
}
});
////////////////////////////////////////////////////////
if (title) {
title = document.getElementById("event-title").value;
$.ajax({
url: "/Calender/UpdateEvent",
type: 'Post',
dataType: "Json",
data: {
eventid:event._id,
Title: title,
Description: ndescription,
StartDay: start,
StartHour: nstartHour,
EndDay: end,
EndHour: nendHour,
}
});
event.id
event.start = start;
event.end = end;
//event.allDay = event.allDay;
event.title = title;
calendar.fullCalendar('updateEvent', event);
$(this).dialog("close");
$('.fc-event-inner').attr({ 'data-start': start, 'data-end': end });
}
calendar.fullCalendar('unselect');
$(this).dialog("close");
},
"close": function () {
calendar.fullCalendar('unselect');
$(this).dialog("close");
}
}
});
});
},
editable: false
});
};
i get object in browser but i cant display events in fullcalendar view.can anybody help me?its emergency course.
How can we make the following work so it will POST the events?
The events can be added to the calendar just fine, we just need to POST them to our API. Fiddle: https://jsfiddle.net/H_INGRAM/9oup1jfb/4/
This is my first time working with Ajax.
$(document).ready(function()
{
/*
date store today date.
d store today date.
m store current month.
y store current year.
*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar(
{
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
selectable: true,
selectHelper: true,
select: function(start, end, allDay)
{
var title = prompt('Event Title:');
if (title)
{
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 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/'
}
]
});
});
$(document).ready(function () {
$('#fullcal').fullCalendar({
eventClick: function() {
alert('a day has been clicked!');
},
events: function (start, end, callback) {
$.ajax({
type: "POST", //WebMethods will not allow GET
url: "/events-truett-volunteership.html", //url of a webmethod - example below
data: "{'userID':'" + $('#<%= hidUserID.ClientID %>').val() + "'}", //this is what I use to pass who's calendar it is
//completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = []; //javascript event object created here
var obj = $.parseJSON(doc.d); //.net returns json wrapped in "d"
$(obj.event).each(function () { //yours is obj.calevent
events.push({
title: $(this).attr('title'), //your calevent object has identical parameters 'title', 'start', ect, so this will work
start: $(this).attr('start'), // will be parsed into DateTime object
end: $(this).attr('end'),
id: $(this).attr('id')
});
});
callback(events);
}
});
}
});
});
definitely you will have a submit handler or button click to sent data, so inside, simply get all client events then serialize and sent to server using ajax.
$('.submitEvent').click(function(){
var clientEvent = JSON.stringify($('#calendar').fullCalendar( 'clientEvents'));
$.ajax({ // ajax call starts
url: url
data: clientEvent,
dataType: 'json',
success: function(data)
{
// success handler
}
});
});
HTML
<input type="button" class="btn btn-primary submitEvent" value="SUBMIT"/>
thanks