We Keep Coding

FullCalendar V6 - How to save date for page reload (month view)

I need to save the view's state when page is reloaded. In other words, when users refresh the page, they should go back to the month they were before.
I am currently using "datesSet" callback in order to store the current date in localStorage, like this :
datesSet: function( dateInfo)
{
localStorage.fullCalendarDefaultDate = dateInfo.startStr;
}
And when i initialize fullCalendar, i use the "initialDate" parameter to set the default date :
initialDate: localStorage.fullCalendarDefaultDate
The problem is, this is not working in month view. As the "starting day" is not necessarily in the current month (ex below), the month view won't initialize on the correct month when page reloads...
Here, the "starting day" would be March 26th, and FC will init on march on next reload...

Thanks ADyson for the solution :
datesSet: function( dateInfo)
{
var date = new Date(dateInfo.view.currentStart);
localStorage.fullCalendarDefaultDate = date.toISOString();
}

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

jQuery function evaluation timing

I have a page that uses the jQuery UI datepicker. I'm trying to make the following happen on my page:
click on the date field -> calendar pops up (datepicker takes care of this)
click on a calendar day -> ajax request fires off, does some server-side calculations (checking for scheduling conflicts and the like), and displays a warning if it's a busy day
It's not exactly a validation, as the intent is to display a warning but still allow the user to submit whatever day they want.
What I have so far fires off the ajax, but with the wrong date. I think it's grabbing the date at page-load rather than when a calendar-day is clicked, so I'm guessing datepicker('getDate') is being evaluated at load time. How can I construct this to evaluate dynamically? Here's the current version (in coffeescript):
jQuery ->
$("#rescheduler").click ->
$("td[data-handler='selectDay'] a").click ->
id = getUrlVars()["booking_id"]
newDate = new Date(datepicker.datepicker('getDate'))
postData = {}
postData['booking_id'] = id
postData['date'] = newDate
$.post '/path/to/check_stuff', postData, ((data) -> doStuff), "json"
or, if you prefer native javaScript:
jQuery(function() {
return $("#rescheduler").click(function() {
return $("td[data-handler='selectDay'] a").click(function() {
var id, newDate, postData;
id = getUrlVars()["booking_id"];
newDate = new Date(datepicker.datepicker('getDate'));
postData = {};
postData['booking_id'] = id;
postData['date'] = newDate;
return $.post('/path/to/check_stuff', postData, (function(data) {
return doStuff;
}), "json");
});
});
});

I suspect that what is happening is the date picker sets the date as, say, March 2, 2014 but this is set as UTC time so the value is something like March 2, 2014 00:00:00. Then when you create the new date from the passed in values your timezone gets added to the mix, causing the date to appear to be off.
If this is so (try logging some of the values to see what, exactly, you are working with) then you need to modifying the date picker value to account for time zone.
Something like:
localDate = new Date(dateToFix); //dateToFix would be the value from the date picker
localTime = localDate.getTime();
localOffset = localDate.getTimezoneOffset() * 60000;
adjustedDate = new Date(localTime + localOffset);

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.

add events to full calendar and store them on mysql through servlet callback

i'm new to the full-calendar jquery plugin, i have integrated the calendar in a jsp page. When the page loads, events are loaded from a MySQl database calling a servlet that generates JSON array of retrived elements.
so far all works fine.
now i'd like to add events on calendar from client side using javascrip, i can't figure out how to make a callback function to a servlet to store the new event in the mysql DB.
i've tried to read the documentation but i'm still clueless about it.
any good advice ?
thanks

You need to bind functions to the various fullcalendar event handlers. For example, you might have a Facebox overlay (or something simpler like a popup window) appear whenever a "day" is clicked.
For example, inside your fullCalendar definition:
dayClick: function(date, allDay, jsEvent, view) {
var year = date.getFullYear();
var month = date.getMonth();
month++;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
$.facebox({ajax: '/addeditevent.php?year='+year+'&month='+month+'&day='+day+'&hour='+hour+'&minute='+minute});
}
In this case, you would have addeditevent.php present a form for the user to add an event to your database.
Once the event is added to the database, make sure to call refetchEvents http://arshaw.com/fullcalendar/docs/event_data/refetchEvents/ to update the calendar for the user.