FullCalendar and Event DateTIme format in different browsers - javascript

So, in my site, I'm using full calendar for its intended purpose. Through a JSON call to a WebService, in my aspx code, I'm getting all the events for a given month from the database. Those are then fed to the calendar. That works quite nicely under Chrome, and the events display properly; unfortunately, under Firefox, (and others) I'm not so successful. If I display event using the most simple form possible, it works in FireFox just fine:
events: [
{
title: 'My Event',
start: '2016-05-01',
description: 'This is a cool event'
},
{
title: 'My Event',
start: '2016-05-02',
description: 'This is a cool event'
}
]
But if I use the code, I have to get the Events dynamically from the database and display them, and then it all fails (again it works on Chrome just fine):
events: $.map(data.d,function (item, i)
{
var event = new Object();
event.start = formatDate(item.StartDate);
event.end = formatDate(item.EndDate);
event.title = item.EventName;
return event;
}),
I managed to determine that neither item.StartDate nor its formatyee works, and the latter alerts 'Invalid date'. Following some further investigation after an unsuccessful attempt to format the date to 'YYYY-MM-DD', I managed to find this solution which apparently is the same as mine, and OP manages to fix their problem.
I can't seem to figure out how they managed to change the format to ISO8601.

It turned out I was converting the Date, before it even gets to the Javascript (when I was getting it from the Database) to a wrong format that even the JS had hard time fixing. For anyone else having problems with the Events on different browsers, just convert your start/end dates to be "yyyy-MM-dd HH:mm:ss" or "yyyy-MM-dd" if you're not using the time variable and it should all be just fine.

Related

My node chat application not show correct time in the client side but this is work great some browser Why?

I am jack junior web developer and I had some problems in my Node based chat application.
That is showing the time when the user sends their messages. You can see our code like this in my client-side Main.js file.
// Submit the form
$('form').submit(async e => {
e.preventDefault();
let time = await getTime();
socket.emit('brodcast', putUserMsg( $('#msg').val(), time));
$('#msg').val('');
return false;
});
function getTime(){
// For reference
// Create instance of Date and get the notation
// const notation = new Date().toLocaleString().split(' ')[2];
//split the time zone
// const timearr = new Date().toLocaleString().split(' ')[1].split(':');
return `${
new Date()
.toLocaleString()
.split(' ')[1]
.split(':')[0]
}:${
new Date()
.toLocaleString()
.split(' ')[1]
.split(':')[1]
} ${new Date().toLocaleString().split(' ')[2]}`;
}
// Return object
function putUserMsg(msg, time){
return{
msg,
time
}
}
[This is my mobile view in chrome Browser and you can notice that when the message type and press enter the time was showed undefined why it's happened. But I am also trying a different browser like Ucbrower it works very well. Why did they happen? Similarly, On my laptop, it's work very well my one and the only question is why they don't show in the Chrome browser?
Advance thank you for your help!
I don't know why it works on other browsers but doesn't work on Chrome, but let me give you a general advice: Keep it as simple as possible.
You're performing various manipulations on the Date object, which are hard to follow and debug. All you need to do, is just send the Date object as it is, which will be converted automatically to Date().toISOString(). This string, that looks something like 2020-04-02T23:51:13.866Z, is the only thing you need to store. It's the universal UTC time, which is unaffected by your local area and day-light saving changes.
So your socketIO emition should look like that:
socket.emit('brodcast', putUserMsg( $('#msg').val(), new Date()));
Later on, in your UI, You can make the desired manipulations on the Date, and present it as you wish. Once you receive the Date string(the one that was created automatically, when you sent the Date object before) back from the server, you can do something like this:
<p>{new Date(timeStringFromServer).toLocaleTimeString()}</p>//This will create a Date object from the string, and allow you to manipulate it.
But the thing you send through socket.io/ajax, should always be as simple as new Date().Also, i recommend using Moment.js for dates.

Using FullCalendar, how to add information to EventObject when eventReceive?

I've started discovering and using FullCalendar but I'm stuck with it.
What I want to do is a ResourceTimeline in Month view, with external event dragging (a left panel).
The subject later would be to have a modal when you drop an event, in order to choose if you want the event to be from 8am to 12pm, or afternoon from 12pm to 6pm.
So first, I'd like to do a simple eventReceive without modal, to see if I can update the event when it's dropped.
But it seems I can't, what do I do wrong ?
From what I can understand, it looks like when you drop an event in month view, the event in the param sent to eventReceive is modified.
eventReceive(info) {
info.event.start = moment(info.event.start).add(8, 'hours').format('YYYY-MM-DD hh:mm:ss');
// var c = confirm('OK = morning, Cancel = aprem');
// if (c) {
// console.log("morning !")
// } else {
// console.log("afternoon !")
// }
}
Events are very basic because I wanted to complete them whenever I drop them into the calendar
new Draggable(listofEvents, {
itemSelector: '.draggable',
eventData(event) {
return {
title: event.innerText,
activite: event.dataset.activite,
allDayDefault: false,
}
},
})
I even tried to force allDayDefault to false but it doesn't change a thing...
Here is the codepen of the project in its current state : https://codepen.io/nurovek/pen/zYYWGyX?editors=1000
Sorry if my post lacks information, I'm not used to ask questions on SO. If it's lacking, I'll try to be more explicit if you ask me, of course !
As per the documentation, an event's public properties (such as "start", "end", title" etc) are read-only. Therefore to alter a property after the event is created you must run one of the "set" methods.
So your idea will work if you use the setDates method:
eventReceive(info) {
info.event.setDates(moment(info.event.start).add(8, 'hours').toDate(), info.event.end, { "allDay": false } )
console.log(info.event);
}
Demo: https://codepen.io/ADyson82/pen/dyymawy?editors=1000
P.S. You might notice I also made a few other little changes to your CodePen, mainly to correct all the links to CSS and JS files, since it was generating all sorts of console errors. These errors were because links were wrong or simply referred to something non-existent, and for some reason you were also using files from two different versions of fullCalendar (4.3.0 and 4.3.1), which is never a good idea if you want to ensure full compatibility.

fullcalendar - date format for end/start events

This (I hope) is a basic question. I'm not seeing calendar events in fullcalendar, and I believe the issue is the date format I am attempting to use for start/end events. I am attempting to setup a basic calendar by loading JSON events. Here is my JSON output (trimmed to one event so as not to take up much room):
[{"id":"89","title":"A Title","start":"June 2nd 2015","end":"August 14th 2015"}]
My javascript looks like this:
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: false,
events: "data.php"
});
});
Again, very basic. I know for certain that the issue for the events not appearing is due to the date format I am using, but I am not certain how to tell fullCalendar to use the MMMM Do YYYY format for start/end events with moment.js. Does anyone have advice on how this is accomplished?
EDIT:
Attempted to add something along these lines...but still no luck:
var start = moment(event.start).format("MMMM Do YYYY");
var end = moment(event.end).format("MMMM Do YYYY");
I'm not sure if this would be considered an answer or more of a workaround, but I'll post it as an answer anyway.
I ended up just converting the date format in the json output as Bruno had suggested in the above comment. Sort of wished I could have figured it out with the javascripting, but after hours of trying I could never get the events to display in the calendar.
I'll go ahead and post my php source for those curious (just showing the start date):
$start = $row['startdate'];
$start_obj = new \DateTime($start);
$events['start'] = $start_obj->format('Y-m-d');
I accomplished something similar by defining a function for the events, iterating through the data creating moment.js objects for the start field using my desired format. The docs have the basics for how to accomplish this.
EDIT: I copied the example from the docs and modified the start time using moment.js.
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: 'myxmlfeed.php',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: moment($(this).attr('start'), 'MMMM Do YYYY') // will be parsed
});
});
callback(events);
}
});
}
});

Fullcalendar shows events 1 hour ahead

I got JSON with correct time but fullcalendar (?) shows my event 1 hour ahead. I tried timezone : local , ignoreTimezone but no success any help would be nice I'm desprate.
My timezone is UTC +08:00
My json is {"hmi_alldays":[{""order_employee_start":"2015-02-03T05:00:00","order_id":1791}
I had a similar issue. I don't know which version of fullcalendar you are using, but the latest version at this time (2.2.6) in combination with moment.js and the usage of timezone works completely fine for me:
var events_array = [
{
title: 'Test1',
start: moment('2015-02-03T05:00:00'),
end : moment('2015-02-03T12'),
tip: 'Test1'},
];
...
$('#calendar').fullCalendar({
events: events_array,
timezone : 'local',
eventRender: function(event, element) {
element.attr('title', event.tip);
}
});
See example here.

angular-ui ui-calendar not updating on changes to Event Source Object / ng-model

I'm adding fullcalendar.js to an angular app using angular-ui / ui-calendar.
(angularjs 1.3.10, fullcalendar 2.2.6, ui-calendar 0.9.0-beta.1, jQuery 2.1.3, moment 2.9.0 & angular-moment 0.9.0)
In the calendar I'm using the dayClick as a datepicker type function to:
- write the selected date to scope (for other uses in the app)
- update the Event Source Object events array with the selected date
- display the selected date (ie newly updated event) on the calendar
I have no problems completing the 1st two tasks, but the 3rd is not updating automatically.
From the documentation:
An Event Sources objects needs to be created to pass into ng-model.
This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.
However it doesn't seem to be updating the calendar this automatically...
Is this a bug in ui-calendar or am I missing something ?
Interestingly if I have the calendar in an ng-if tab, and toggle between the tabs, the calendar updates correctly (after the toggle).
See this jsfiddle and:
- run, then select a date (notice the events array is updated correctly)
- toggle Tab 2 then back to Tab 1 - notice the date now displays correctly...
html looks like:
<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>
Controller code looks like
myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){
$scope.calendarDate = [
{
events: [
{
title: 'From',
start: '2015-01-31',
allDay: true,
rendering: 'background',
backgroundColor: '#f26522',
},
],
}
];
$scope.setCalDate = function(date, jsEvent, view) {
var dateFrom = moment(date).format('YYYY-MM-DD'); // set dateFrom based on user click on calendar
$scope.calendarDate[0].events[0].start = dateFrom; // update Calendar event dateFrom
$scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');; // update $scope.dateFrom
};
$scope.uiConfig = {
calendarFrom : {
editable : false,
aspectRatio: 2,
header : {
left : 'title',
center : '',
right : 'today prev,next'
},
dayClick : $scope.setCalDate,
background: '#f26522',
},
};
});
PS had a look at this question (which is similar) but was asked quite a few versions ago - plus the suggested solution calendar.fullCalendar('refetchEvents'); doesn't work since the calendar object is not defined - unsure what calendar.fullCalendar would be for my code...
That seems to be a problem with ui-calendar. I haven't been able to solve it so far. However, as a workaround, instead of updating the current event, you can create a new one: just replace $scope.calendarDate[0].events[0].start = dateFrom; by $scope.calendarDate[0].events.push({title: 'From', start: selectedDate, allDay: true, rendering: 'background', backgroundColor: '#f26522'});: http://jsfiddle.net/gidoca/kwsrnopz/.
On a side note, to access the calendar object to call the fullCalendar function, you would use $scope.myCalendar1 - ui-calendar adds it the the scope with a variable of the name given as the calendar attribute in the HTML.
I had the same issues but sorted out by two different ways.
When dynamically loaded the content through $http use uiCalendarConfig addEventSource
uiCalendarConfig.calendars['mycalendar'].fullCalendar('addEventSource', $scope.events);
Incase if calendar toggles visibility and hidden on load use refetchEvents
$timeout(function(){
uiCalendarConfig.calendars['mycalendar'].fullCalendar('refetchEvents');
})
$timeout holds the calendar to compile within the scope

Categories