We Keep Coding

FullCalendar and Event DateTIme format in different browsers

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.

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);
}
});
}
});

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

Sugarcrm date picker disable dates before current date

Has any one managed to disable dates on sugars date picker before the current date?
I am calling it in a custom programmed module like so:
<script id="script" type="text/javascript">
YAHOO.util.Event.onDOMReady(function()
{
var now = new Date();
Calendar.setup ({
inputField : "date",
ifFormat : cal_date_format,
daFormat : "%m/%d/%Y %I:%M%P",
button : "date_start_trigger",
singleClick : true,
step : 1,
weekNumbers: false,
startWeekday: 0
});
});

There is no upgrade safe way to do this.
But have solved it by adding a parameter in include/javascript/calendar.js
Search for line calendar.cfg.setProperty("selected" just after that line add following code
if(typeof(params.customMinDate) != 'undefined')
calendar.cfg.setProperty("minDate", params.customMinDate);
And then in your calendar setup array, you should add following param,
customMinDate : new Date(),
And that should now disable all dates in past. But this works on for the calendar pops up on text field, and not when you click on calendar image.
If you find its solution, do share here, which will help others and me too.
I hope SugarCRM will overcome this limitation and make it more flexible in future releases.

How to get a time visible in events?

I'm using FullCalendar 1.5.3 to display events from a json feed. I have 4 fields per event fed back - id, start, end and title. This works with each event block displaying the title.
In the FullCalendar examples the events with start and end dates show with a start time inserted before the title (formatted as 7p or 10:30a for example). How is this achieved? All my events have start and end times and I'm using the following settings...
$(document).ready(function(){
$('#claimCalendar').fullCalendar({
theme : true,
editable : false,
firstDay : 1,
aspectRatio : 4,
timeFormat: {
'' : 'H(:mm)t'
},
allDayDefault: false,
eventSources: [
{ //list of my eventSources
}
],
loading: function (bool) {
if (bool) $('#loading').show();
else $('loading').hide();
}
});
});
Any ideas on how to get the time to display? Eventually I would like the following information displayed for each event
start title end e.g. 00:00 title 07:30

I've sorted this out... Not sure why this has happened as I have used both allDayDefault:false in the fullCalendar params and allDay:false in my events but no time was displayed. I then modifed line 38 in FullCalendar.js 1.5.3 from allDayDefault:true to allDayDefault:false and hey presto I got my times showing.
I've also solved my second task and my events now display start - title - end.