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.
Related
I am using Ant Design (3.x) in my react application. It's a timezone based application. we have timezone list as dropdown in the top bar. when we select any timezone, all the date and time fields ( Table column data, Tooltip, summary data, etc...) in the app are changing accordingly.
HKT Time:
IST Time:
But, Inputting date and time in DatePicker is not changing based on Timezone
HKT Time:
IST Time:
It is only taking the computer's timezone (My guess). I am using moment timezone package for converting date and time based on Timezone. This package only antd is using.
Try setting/updating the timezone upon drop-down value change with moment-timezone (call the setDefault with specific timezone value upon drop-down change). For example,
moment.tz.setDefault("America/New_York");
Ant design DatePicker is picking the timezone as per moment.tz.setDefault - CodeSandbox example for the same
For additional information on default timezone check the official docs
With dayjs the accepted solution didn't work for us. We wanted our date to be displayed in UTC and ended up making a custom format like
format={date => date.utc().format("MMM DD, YYYY HH:mm:ss")}
You could do something similar with a timezone like
format={date => date.tz("America/Los_Angeles").format("MMM DD, YYYY HH:mm:ss")}
Note: you will need to add the utc and timezone plugins
import utc = from 'dayjs/plugin/utc';
import timezone = from 'dayjs/plugin/timezone';
dayjs.extend(utc)
dayjs.extend(timezone)
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.
I am using react big calendar and I am using the start days and end days of the week for my api call
here's the function I am calling to get events
getEvents(calendarId,firstday,lastDay);
this function creates the api url to hit using the calendar id and the dates for first day and last day.
so, if the calendar shows the week as 20th august - 27 august
then first day is 20-08-2017 and last day is 27-08-2017
and my api url becomes
calendar/events/?start="20-08-2017"&end="27-08-2017"
for next week i.e 28-08-2017 to 3-08-2017
I want to get dates automatically from the calendar
so I can use it in my api call?
the problem is that I am quite new to react-big-calendar and I dont know how to get the dates from there.
I'd really appreciate it if you could provide some suggestions or advice or even point me where to look.
I have been through the documentation but couldnt get what I want.
EDIT:
I am using onNavigate as shown below to call the function that makes the api call
onNavigate={() => {
actions.calendar.getEvents(this.props.params.calendarId, firstday, lastday);
}}
Try to change your callback to accept the current start date of your calendar:
onNavigate={(date) => ...}
and calculate the requered date range for your API call e.g. using moment JS lib.
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..!!!
I am evaluating angular-bootstrap-datetimepicker, is there a way to set the timezone for the component so the dates on the screen would appear in some custom timezone like UTC? E.g. when I am in GMT+3 and I click on the UI button for "Aug 13 2PM", and output the following:
From: {{date.date}}<br>
From: {{date.date | date:'yyyy-MM-dd HH:mm'}}
The output will be 3 hours apart, where the local time corresponds to the button in the UI, meaning that on the UI, I see local times - not UTC time. For example:
From: "2015-08-13T11:00:00.000Z"
From: 2015-08-13 14:00
I also tried running moment().utcOffset(0) immediately after loading moment.js, it didn't help.
How do I set the component to show the UI in a custom timezone?
There is currently no way to set the timezone, it always uses the timezone of the browser.
If you just need utc dates (i.e. milliseconds), there is a new modelType setting that allows you to always work in UTC.