We Keep Coding

Full calendar not display correct date time in week and day view

I have this full calendar code
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: baseUrl+"events",
dataType: 'json',
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
description: "Start time :"+$(this).attr('start')+"End Time:"+$(this).attr('end'),
start: $(this).attr('start'),
end_time: $(this).attr('end'),
});
});
callback(events);
}
});
}, eventRender: function(eventObj, $el) {
var startDate = moment(eventObj.start).format('DD MMM, Y hh:mm A');
var endDate = eventObj.end_time ? moment(eventObj.end_time).format('DD MMM,Y hh:mm A') : '-';
var contentsHtml = '<div class="t2f_popover_event"><ul>';
contentsHtml = contentsHtml+ '<li> <b>Start Time: </b>'+ startDate+'</li><li> <b>End Time: </b>'+endDate+'</li><li><b>Event Type:</b>'+(' Working hours')+'</li>';
'</ul> </div>';
$el.popover({
title: '<div style="color:#fff; text-transform:capitalize;font-weight: 600;padding:5px;">'+eventObj.title+'</div>',
content: eventObj.description,
trigger: 'manual',
placement: 'left',
container: 'body',
content: contentsHtml,
html: true
}).on("mouseenter", function () {
...
...
});
},
eventOverlap : false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
changeView : 'agendaDay',
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
selectConstraint: {
start: jQuery.fullCalendar.moment().subtract(1, 'days'),
end: jQuery.fullCalendar.moment().startOf('month').add(1, 'month')
},
displayEventTime: false,
disableDragging: true,
editable: false,
eventLimit: true,
});
});
Start time is - 2022-12-03T01:00:00 i.e 1:00 AM
End time is - 2022-12-03T11:59:00 i.e 11:59 AM
but on calendar time is not proper of each event.
it should be from 1:00 AM to 11:59 AM but in calendar event start from 1:00 AM.
Any Solution to fix this issue. Thanks

fullCalendar wont load title on document.ready

I have a fullCalendar on my site which should load the month when the page is loaded up, but for some reason the month's title wont load until a month selection button is pressed.
I'm probably overlooking something simple, could anyone have a look at tell me where I'm going wrong.
Here is my code:
$(document).ready(function() {
$(".calendar").fullCalendar({
defaultDate: new Date(),
editable: false,
firstDay: 1,
timezone: 'local',
header: {
left: "",
center: "prev, title, next",
right: ""
},
defaultView: 'month',
viewDisplay: function(view) {
},
columnFormat: {
month: 'dddd',
week: 'dddd D/M',
day: 'dddd D/M'
},
allDayDefault: false,
eventSources: [
// your event source
{
url: 'https://www.burtonstreetcrm.co.uk/scripts/booking_session_calendar.php', // use the `url` property
textColor: 'white' // an option!
}
// any other sources...
],
eventOrder: "lookup_building",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
// end hide dates //
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
if (event.id) {}
},
selectable: true,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar" class="calendar"></div>

The issue is with columnFormat: {
month: 'dddd',
week: 'dddd D/M',
day: 'dddd D/M'
},
As per document it accepts string value not Array
so
columnFormat:'dddd' will give you expected output
$(document).ready(function() {
$(".calendar").fullCalendar({
defaultDate: new Date(),
editable: false,
firstDay: 1,
timezone: 'local',
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,agendaWeek,agendaDay'
},
defaultView: 'month',
viewDisplay: function(view) {
},
columnFormat:'dddd',
allDayDefault: false,
eventSources: [
// your event source
{
url: 'https://www.burtonstreetcrm.co.uk/scripts/booking_session_calendar.php', // use the `url` property
textColor: 'white' // an option!
}
// any other sources...
],
eventOrder: "lookup_building",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
// end hide dates //
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
if (event.id) {}
},
selectable: true,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar" class="calendar"></div>

Fullcalendar v2 store dragged event into localstorage

How can I store my dragged events into localstorage ? I have figured out in old fullcalendar version but this solution is not working any more.
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );
$('#calendar').fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
eventDrop: function(event) {
// ???????????????????????????????
},
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
events.push(eventData);
localStorage.setItem('events',JSON.stringify(events));
}
$('#calendar').fullCalendar('unselect');
},
events: function(start, end, timezone, callback) {
callback(jsevents);
}
});
},
You can see my select function fully working. I mean selected events are stored into database.

i was able to replicate your example, and it worked just fine, the only thing i added is the definition of Events, i made it as backbone collection
var Events = Backbone.Collection.extend({});
I think you need to debug while setting the value in local storage, try to log the value of
JSON.stringify(events)
just before setting in local storage
EDIT:
jsfiddle: http://jsfiddle.net/mfarouk/vcsr45q8/25/

Full calender - Remove Events on day click and remove Bg-color of particular cell

I need to limit the events to one in a particular date, and on click of date if any events are present, it has to be removed.
While adding an event to a date, the color of the cell should be turned orange, and while deleting the event, it has to be turned back to white.
$(function () {
// Full calendar
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, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
backgroundColor: 'orange',
allDay: allDay,
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event){
var r=confirm(\"Are you sure?\");
if (r==true)
{
$('#calendar').fullCalendar('removeEvents',event._id);
}
},
dayClick: function(date, allDay, jsEvent, view) {
if($( this ).hasClass('bg-orange')){
$(this).removeClass('bg-orange');
}
else
{
$(this).addClass('bg-orange');
}
},
editable: true,
events: [
]
});
});

connect to database data in fullcalendar

I've see the calendar code on arshaw/fullcalendar. And I've changed a little code, but I still don't know how to connect javascript into database..
Here's the original code
$(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'
},
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,
});
});
And this I changed a bit
$(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'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
newwindow=window.open('2.php','name','height=400,width=300');
if (window.focus) {newwindow.focus()}
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
});
});
Where can I put the connection script ?
Need advise..
Thanks,

You cannot establish a connection directly from javascript to use in full calendar
You have to do this
Create a Servlet/Action Class/ C# Class (whatever we based Controller class);
Connect to database from the Controller
Write the response data as a JSON String
IN the full calendar, add this attribute
events: "servletURL",
When the calendar loads, the events attribute will call the servletURL, using ajax and retrieve the response text to display it in the Calendar