I am using this calendar https://github.com/mattlewis92/angular-bootstrap-calendar for showing events and time slots for people all over the world. During sign up, every user has to set his timezone and then my application uses this timezone for further date computation rather than client machine timezone.
The problem is that when I make user timezone default using moment.tz.setDefault(timezone) and change the machine's timezone, the calendar calculates dates wrongly.
Here is my excerpt of my code:
moment.tz.setDefault($rootScope.timezone)
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.cellIsOpen = true;
Attached is the screenshot:
[Screenshot]
You can see that user's timezone is currently Asia/Karachi +5 and my machine's timezone is Beijing +8. Today's date is 8 September and the day is Friday, but on the calendar 8 September is showing as a Saturday instead of Friday.
mwl-calander did not provide support for timezone, you can use full calander
https://fullcalendar.io/
Demo https://fullcalendar.io/js/fullcalendar-2.9.1/demos/timezones.html
Its angular directive can be found at
https://github.com/angular-ui/ui-calendar
It would appear that this particular UI control does not support selecting a time zone. Simply using moment.tz.setDefault is not good enough, because everything the control is doing both internally and in its external API is using Date objects, which cannot represent arbitrary time zones. In other words, the author of that control would have to remove all .toDate() calls and use Moment objects as the primitive in the control instead of Date objects. That would be a breaking change for them.
I suggest filing an issue in that project's GitHub repository, and reference this page.
Related
I am using fullcalendar in Salesforce.
There is this custom form created in salesforce in which user enter date and time in custom field which further creates a event in calendar on the specified date from form.
The issue is when I create event using agendaweek it saves the record using form for the specified date and time but when switching to month view and on manually adding the time it saves the event in calendar 5:30 hours behind.
I consoled output
End_Date_time__c":"2021-05-10T06:30:00.000Z","Start_Date_time__c":"2021-05-10T05:30:00.000Z"
I tried solving this issue by changing the timzone using following line which allows me to save as per the requirement but it changes the timezone of agendaweek making it 5:30 hours ahead because of the below specified line.
josnArr[i].start = new Date(josnArr[i].start).toLocaleString(undefined, {timeZone: 'Asia/Kolkata'});
If anyone could please suggest something.This is the form which I have used to create records in calendar.
I'm using React Big Calendar week's view. The default locale is en-US and this one I'm using currently and would like to still use it. Also I'm staying in +1 timezone.
When I'm fetching some calendar data from API all data I get is given in UTC. What I find strange is that when time change occurs (week: 29.03 - 4.04) 3:00 AM is shown twice. Also which is even stranger all my events are moved lower by one hour. For example, before time change from API I'm getting event starting at 4AM UTC so it is correctly shown as 5AM in calendar (due to my +1 timezone). After time change I'm getting 4AM UTC but it is shown as 6AM UTC.
I'm not sure if it is deliberately that way but I would like to have it shown exactly the same (ie. 5AM before and after time change).
Thank you for helping.
I've imported localizer in that way:
import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
const localizer = momentLocalizer(moment);
<BigCalendar ... localizer={localizer} ... />
The (0.36.0) latest version of RBC has full timezone support now, when using either the momentLocalizer or the new luxonLocalizer. Doc site isn't up to date yet, but if you run the 'examples' locally you'll find all the info.
The issue of seeing 3AM twice is that date is the beginning of Daylight Savings for your timezone.
Is Microsoft Graph API calendarView limited to a single month? How can I get all events? Is there some implicit pagination?
I'm first checking the JSON output of events between 2017-01-01 and 2018-12-30:
https://graph.microsoft.com/v1.0/me/calendar/calendarView?startDateTime=2017-01-01T00:00:00.0000000&endDateTime=2018-12-30T00:00:00.0000000
and list the dates
jq '.value[] .start .dateTime'
"2017-11-22T13:30:00.0000000"
"2017-11-23T14:00:00.0000000"
"2017-11-24T14:00:00.0000000"
"2017-11-27T10:00:00.0000000"
"2017-11-27T10:00:00.0000000"
"2017-11-27T11:00:00.0000000"
"2017-11-27T14:30:00.0000000"
"2017-11-28T09:00:00.0000000"
"2017-11-29T09:00:00.0000000"
"2017-11-29T14:00:00.0000000"
No calendar events from 12th month of 2017 for example! But I have them!
And then do a similar call for by narrowing the left end of dates range between 2017-12-01 and 2018-12-30, and now I get:
"2017-12-01T12:30:00.0000000"
"2017-12-01T14:00:00.0000000"
"2017-12-04T08:30:00.0000000"
"2017-12-04T12:00:00.0000000"
"2017-12-06T09:00:00.0000000"
"2017-12-06T10:00:00.0000000"
"2017-12-07T13:00:00.0000000"
"2017-12-13T09:00:00.0000000"
"2017-12-13T09:00:00.0000000"
"2017-12-13T13:00:00.0000000"
I'm confused by List calendarView and List events documentation.
How can I get all of the events in my calendar, the ones that I can clearly see to exist in November and December of 2017, as well as in January, and February of 2018?
Do I have to call this API repeatedly for every month in a year? (I hope there's a single call I can make to get all the events in a year, or two years, after which I can filter, process, etc.)
Difference between list events and list calendarView
When you list events (GET /me/events), you get a non-expanded list of items in the calendar. What that means is that if you have recurring events, you would only get the series master in your results. It would be up to you to read the recurrence pattern and expand the event.
When you list a calendar view (GET /me/calendarview?...), you get an expanded list of items. That means the server does the work to expand any recurring events and build a "view" of your calendar. So in this case if you have a recurring event, instead of getting the series master, you would get one or more occurrences of the series (depending on how many times it repeats in your view window). Because of this expansion work, you must provide a start and end time to put some sort of bounds on the call.
Another way of looking at it is the calendar view is more like what you're used to seeing when you view your calendar in Outlook.
So where's all my events?
I'm not aware of any specific limitation on the size of the window for a calendar view. (Not saying there isn't one, I'm just not aware of it). The more likely explanation is that you're not seeing all the events you expect because all API requests that return collections do have built-in paging. By default, you're limited to 10 items in the response. You should also see in your response an #odata.nextLink, which is the URL you can use to request the next page of results (again, 10 being the default page size). You can increase your page size by using the $top parameter, up to a maximum of 1000 (IIRC).
GET /me/calendar/calendarView?startDateTime=2017-01-01T00:00:00.0000000
&endDateTime=2018-12-30T00:00:00.0000000&$top=1000
Given a ui control that when you select 01/01/2017 it returns a Javascript date as "Sun Jan 01 2017 05:00:00 GMT+0000" (note, an actual Javascript Date object) so its not a string...
However, I definitely need the date part (01/01/2017) and "as UTC"
C# has a DateTime.SpecifyKind(datetimevalue, DateTimeKind kind) method
Basically whats the equivalent to this that doesnt convert it:
moment(vm.theDate).specifyKind(utc)
Looking for to get a moment instance that is 01/01/2017, isUtc=true, from that type of Javascript Date UI control. (Its the Angular ui-datepicker control)
You should look in the UI control's docs for a way to retrieve the selected value as a string instead of a date object. A date object will be influenced by the local time zone, which will throw off your results - especially around DST transitions. Many good datepicker controls will offer this as a separate property (ex, theControl.value or theControl.text instead of theControl.date). Without knowing the specific control you are using, I can't offer anything more specific.
Once you have the string, use moment.utc(yourInputString, yourInputFormat)
I am using Arshaw full calendar[Angular bootstrap] in my project, but after implementing it, Whenever I go to the day view and click on the time span say 12.00am, day click event gets fired and if I extract date from the view object I get the same date but the timing shows 05.30.0, That means there is difference of 5.30 hours... Why is this happening, I am using the latest version of master calendar. I am sharing the snapshot of the same. Please help, Thank you..!!!