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.
Related
Ive recently started to learn React and I've gone ahead and created an app that shows the weather using OpenWeatherAPI. Im only able to display a single day forecast whereas I would like to show a 5 day forecast instead.
As per attached is my code to the app. I have tried to change the Api URL to
api.openweathermap.org/data/2.5/forecast/daily?lat={lat}&lon={lon}&cnt={cnt}&appid={apiKey}
But it doesn't seem to correspond as I get an error message on my console saying that I have invalid API Key which doesn't make sense as I'm able to do it on a single day forecast.
From this App.js what will I need to change to display a 5 day forecast instead of a single day forecast.
For 5 days data, you should call ${BASE_URL}/forecast instead of ${BASE_URL}/weather.
In the text, you typed out /forecast but I saw /weather in your actual code in the image.
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.
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 new to angularJS and now i would like to how to add the year from current date.
Let's say i can get the user DOB and i want to add the year+1.
I have tried by using,
$scope.userdob = $rootScope.user.dob;
$scope.userdob.add(1,'years');
but it's not working.
Can anyone help me to know about this logic with example ?
TIA..,
You should use .setDate() function to increment the days.
I created an angular example here http://codepen.io/heshamelghandour/pen/WwodMP
It looks like $rootScope.user.dob is an instance of moment from the moment.js library. I think your main problem is angular's change detection cannot detect when you mutate this instance. Because the instance remains the same but the internal underlying date value does change. Thus I'd suggest:
$scope.userdob = $rootScope.user.dob.clone().add(1,'years').valueOf();
That way angular will get a regular JavaScript Date object instead of a moment instance and it's change detection will work correctly.
FYI to accomplish the same with a standard javascript Date instance you can do:
var userdob = new Date();
userdob.setYear(userdob.getFullYear() + 1)
To advance the year by 1.
Use .setDate() function to increment the days and instead of +1 day and add +365 days it will give you date after 1 year.