Fullcalendar shows wrong day in month view - fullcalendar

I'm using Fullcalendar within a Asp.Net project and I'm using the function 'events' to refresh items in my calendar.
I'm putting events in myArray to pass it in the callback function as below:
var event = {
title: 'Disponível',
start: moment(horario.DtInicio),
end: moment(horario.DtFim),
}
myArray.push(event);
where horario.DtInicio and horario.DtFim is a Asp.Net json Date (eg. "/Date(1423321200000)/")
When I show callendar in month view, this date shows in 02/06/2015 (mm/dd/yyyy), but when I toggle to other view, this event shows in 02/07/2015. The real date is 02/07/2015.
Has anyone faced this situation?

Try to set the timezone for the calendar:
$('#calendar').fullcalendar({
timezone : 'local',
...
});

As RodrigoDela suggested, try setting your timezone. If that does not help, then try what worked for me.
Setting the timezone alone to "local" did not fix the issue for me. Updating moment.js from 2.8.3 to 2.8.4 did fix the issue.
For reference, I am running the following versions of FullCalendar and its dependencies:
FullCalendar 2.2.6
jQuery 2.1.3
jQuery UI 1.10.4
moment.js 2.8.4
Additional details regarding my debugging process and fix here.

Related

xrmquery.update -> update crm date field

I'm writing a custom typescript page for a scan module.
When a code is scanned a datetime field on a CRM record needs to be updated.
Here is my code:
XrmQuery.update(x => x.cgk_bonuses,
this.bonusId(),
{ cgk_datescan: new Date() })
.execute(id => { });
Does anyone know what I'm doing wrong for updating a datetime field?
Update other fields works fine.
It looks like you have found a bug in relation to updating Date and Time fields in CRM through XrmQuery.
I have created an issue for us to follow up on this:
XrmQuery: Debug sending dates to CRM
This issue has now been fixed in version 2.3.7
https://www.nuget.org/packages/Delegate.XrmDefinitelyTyped/

How can i change the date format for "list-month view" in full calendar?

I just want to change the date format for list month view('fc-list-heading-main') in full calendar. I tried all different way but i was not successful. Please let me know how can i change date format.
Any help would be appreciated.
After going through the source code (fullcalendar.js) I have found the solution: there is an option called listDayFormat. So try something like:
$('#calendar').fullCalendar({
defaultView: 'listMonth',
listDayFormat: 'D MMMM YYYY'
});
This will change the date format for fc-list-heading-main.
There is also an alternative formatting option called listDayAltFormat, that one is responsible for the formatting inside fc-list-heading-alt.
Right now i didn't find any solution for this. I didn't find any full calendar api for this. I have fixed this with jQuery.
jQuery('.fc-list-table .fc-list-heading').each(function () {
jQuery(this).find(".fc-list-heading-main").html(jQuery(this).find(".fc-list-heading-main").text().split(',')[0].split(' ')[1]);
});
jQuery('.fc-list-table .fc-list-heading').each(function () {
jQuery(this).find(".fc-list-heading-alt").html(jQuery(this).find(".fc-list-heading-alt").text().slice(0, 3));
});
Placed the above code after calendar rendered. Also added this code for next and previous events.

FullCalendar call gotoDate and set firstDay programatically

I have added a custom button to the header of the calendar that has each month of the year in it. The idea is that you can select the month and the calendar will jump to that month.
I currently have firstDay set to 1 to start the calendar on a Monday, this is because in most scenarios I do want Monday to be the first day. When I call gotoDate I would like the calendar to jump to that date with it being the first visible day on the calendar; it should always be the 1st of the selected month.
Currently it goes to the date but the firstDay is Monday of that week.
I have searched to see if I could find anyone else trying to achieve this and came across the this issue but this was for quite an old version of FC, I am using 2.7
Is there a way to pragmatically set the firstDay without forking the calendar and changing the internal code?
Any help would be greatly appreciated.
*I haven't included any code because I don't think it would add any value to the question. I am not calling anything to set the firstDay other than when it is initialised.
I have found that as of version 2.9, released on the 11th July 2016 support has been added for getting and setting options dynamically.
I have upgraded from version 2.7 to 2.9 and managed to use the following code to set firstDay after the calendar is initialised.
$('#calendar').fullCalendar('option', 'firstDay', 0);
The documentation for Get/Set Options Dynamically, not all options can be set dynamically.
The GitHub issue that added the functionality.

Angular UI bootstrap timepicker uses new Date() as a model, how do elegantly wrap it to display UTC time to the user?

http://angular-ui.github.io/bootstrap/#/timepicker
Angular UI bootstrap timepicker uses "new Date()" as a model, how do elegantly wrap it to display UTC time to the user? (new Date() uses local timezone)
I'm using momentjs to manage my datetimes but when i bind it to this directive it converts it to my local timezone.
I was trying to avoid adding the timezone offset hours on the way in, and subtracting them on the way out? I was hoping for something more elegant or Angular-y.
Or is there a better alternative directive?
You could try creating the date on your model using Date.UTC:
// controller
$scope.utcDate = new Date(Date.UTC(year, month, day, hour, minute, second));
<!-- view -->
<timepicker ng-model="utcDate"></timepicker>
Untested, so it probably won't work.
Alternatively, super long shot, you could try binding to the output of moment.utc() and hoping for the best :-).

How can I manipulate the post date in Ghost using the Momentjs 'add' function

I've just started a Ghost.org blog and I want the blog post dates to display one year ahead of when they were actually written. I know Ghost uses Moment.js and I am able to adjust formatting (DD MM YYYY, YY MM DD etc...) but it doesn't seem to accept the 'add' function described in the Moment.js docs.
This is the code I currently have.
<time datetime="{{date format="YYYY-MM-DD"}}">
{{date format='DD MMM YYYY'}}
</time>
To be clear, I want the blog post dates to remain accurate in ghost. I simply want to manipulate what gets DISPLAYED to the user as 1 year ahead.
EG. I write a blog post and it's post date is 20th Dec 2013. I want the date on the blog post to DISPLAY 20th Dec 2014.
The Ghost {{date}} helper does not seem to accept the 'add' function.
Any help would be really appreciated. I am still learning javascript, so there may be something obvious I'm missing. I apologise if that's the case.
I guess it's a bit late for you but it might help other people.
I found a way to edit the date in the casper view. It's more a hack than a real solution. But I wanted to be able to modify the date language without modifying the core. So here is my solution:
You need to add moment js in the casper template to do so you need to download it on the website and place it in the asset folder.
Place http://momentjs.com/downloads/moment-with-locales.min.js in /content/theme/casper/assets/js/
Then you need to call it in you /content/theme/casper/default.hbs
Add this line at the bottom of the file just before the index.js one.
<script type="text/javascript" src="{{asset "js/moment-with-locales.min.js"}}"></script>
Finally add this code in /content/theme/casper/assets/js/index.js just after the line
$document.ready(function () {
like this :
var dates = $('.post-date');
var i = 0;
var postDate = moment();
for(i=0;i<dates.length;i++){
postDate = moment(dates.eq(i).html());
postDate.add(1,'year');
dates.eq(i).html(postDate.format('LL'));
}

Resources