Full Calendar "Time Zone Demo" Example - javascript

I'm trying to learn from this example:
http://fullcalendar.io/js/fullcalendar-2.9.1/demos/timezones.html
Please also right click on the web page to view the page source.
The only part that does not work now is as follows:
// when the timezone selector changes, dynamically change the calendar option
$('#timezone-selector').on('change', function() {
$('#calendar').fullCalendar('option', 'timezone', this.value || false);
});
It is trying to change the calendar time display based on the selection of different time zones.
I'm not an expert in Javascript and have tried to find FullCalendar's explanations on this but with no luck.
My question:
1) What can "this.value" possibly mean? "|| false"?
2) In the backend of my web application, I use Java web servlet with hibernate 3.6. For the time input (start time and end time), I use LocalDateTime from Java 8 and store it as UTC timestamp in MySQL. Not sure if this is the best practice for a calendar-based scheduler?
3) Currently, I don't have a timezoneId attached to the timestamp stored in the database yet. But I have created a list for the user to choose from as the FullCalendar example did. Any suggestion on what is the best way to store and later use a timezoneId for this calendar display across different time zones?
For now, I'm thinking that trying to totally imitate FullCalendar's example is not very practical because my database is different from theirs. I'm open to any good suggestions on how to get user's current timezone from his selection, store it in database and later display the proper time value based on any timezone selected by the user on his calendar view page.

If you inspect the timezone select you can see that each option has a value. this.value means the on change function will grab the value of the selected option to assign as the timezone. As far as storing your times, they should be stored as UTC timestamp like you are doing. For retrieving the timezone I use jstz to get the users timezone, its as simple as these two lines.
var tz = jstz.determine();
var timezone = tz.name();
This is great because you dont have to ask the user for their timezone. Then when I query my database for events I pass in the timezone
events: {
url: "calendarManager.php?request=get&timezone=" + timezone + "&userid=" + userID
},
and use php to convert from utc to the users local timezone and return the json encoded events.

Related

Javascript console logged DATE type POSTGRESQL reduced 1 day

I have a database with date as the Id and im going to select the date/id of the last 5 days from my postgresql database to browser using command bellow and send it to the client side using res.send on node/express
SELECT * FROM ratings ORDER BY rating_id DESC LIMIT 5
but if i console log it, it always less 1 day behind, 2021-04-02 even not in the database
i have done parsed it from the client side, but what i got is only the last 4 days, 2021-04-03 is missing
This is because your data field has a timezone component. So my question is: do you need store the timezone component in your dates?
If yes. So when you format your time you need take it in consideration. The browser automatically go to give you the date in the browser time zone, for that may be you can get a day more or less.
If no, you can format the date without take the timezone component.
PD: you should store your date values as UTC date in your DB always.

Manage daylight saving time when sending datetimes from javascript to php

I need to store datetimes in a mysql database.
These datetimes come from the browser, so users in the US, Europe or Asia or wherever will see their correct times.
In the browser, i have the following javascript code:
var d = new date();
var iso_date_string = d.toISOString();
// produces something like "2017-02-17T19:42:27.100Z"
I send this string to the server which runs PHP, and in my server code I have:
$date = date( "Y-m-d H:i:s", strtotime("2014-02-17T19:42:27.100Z") );
And then I insert this value in MySQL.
Everything works fine, except I don't get the exact time, there is a 1 hour difference between what I store in MySQL and the time I have on my computer.
I think this may be related to taking into account daylight saving times, but I can't find how to do it.
Please advise.
When you always send the UTC datetime to your server and let javascript convert it back when showing, the problem will not occur.
The PHP date will be affected by the Timezone information embedded in the php.ini file.
As far as mysql storage is concerned, you will probably want to use UTC or some other standard not affected by daylight savings to store your datetime in mysql. Then, regardless of which browser reads it, it should get converted back according to their local timezone information.
See this article for further reading:
Daylight saving time and time zone best practices
You can use getTimezoneOffset() to check if it's DST, because it corrects for DST.
I found this solution on
http://javascript.about.com/library/bldst.htm
Setting the correct timezone information in the php.ini file did the trick.
Thanks.

MySQL DateTime Unexpected behavior

I have a DATETIME field in my table that is being displayed differently than what I'm returning.
To understand, here are the exact object fields I'm returning in my API:
However, when I'm using PostMan and looking at the results, the time is being changed from what I'm returning to this:
I don't understand what's going on. I'm trying to store the DATETIME in the database as UTC time, and then have it sent over to the client, where the client will convert it to local time.
Here's what the DATETIME dates looks like in the database:
You're not storing the dates in UTC time. "GMT-0400 (EDT)" means that they're being stored in Eastern time. The Z in the other results means UTC (or Zulu) time, according to this spec: http://www.ietf.org/rfc/rfc3339.txt
I expect that your MySQL installation has the default timezone set to the timezone that your box is in (https://dev.mysql.com/doc/refman/5.5/en/time-zone-support.html) so when you add a time without specifying the timezone, it's assumed it's in the default timezone. That is then being converted to UTC in your response, adding four hours to the time.
You should probably specify a timezone when adding information to the database, and/or change the default timezone for your database. There may also be another layer "helpfully" changing things, depending on the API you're using to access the database, so if there is relevant information about the API, you can add that to your question.

I want one calendar for datepicker textfield. In which I want that my calendar should show current date as my server current date. how to do it...?

Right now I'm using one js file containing some function of that calendar code but my calendar always showing current date as client date. I tried a lot but finally I knew that calendar of javascript always take the client date and time .So can you please tell me how my web application calendar will show me the current date as server current date instead old client current date
As you know that js always take client side date so you have to make trick for it
one trick for which i go is
on the time of rendering html i will take server side date into an hidden field and when jquery calll the current date i will pass it as a current date
You could send a value from the server which holds the current server time and create a new date object on the client side which holds that value, hence effectively showing the date on the server.
However, there has to be a VERY good reason for doing so, as this can be very confusing to the user.
Also, your server may be located in one timezone right now, and another tomorrow (if you move to another provider), so the dates may be inconsistent if you save a response from the user.
If you grow a bit bigger and need redundancy across data center, you will definitely have different time zones as you will want your data centers to be distributed geographically.
So, what's usually a best practice is to show the user his own time, and translate it to whatever you want on the server.
you may simply read it a variable during page load like:
$startOfMonth= date("01-m-Y");
and assign it yo your datepicker field like
">
Please Try this
$( ".selector" ).datepicker({ defaultDate: "<?php date("m-d-y"); ?>" });

javascript datetimepicker with local support

I want the user to enter an appointment date and time and send him a reminder an hour before it.
On the server I want to store the date-time in UTC, but on the client the user will enter it in his local time. Whats the best way to deal with this conversion?
Is there a plugin that natively supports this?
Yes, there's a plugin which detects the timezone according to the system-information (jsTimezoneDetect). Actually a date-object itself stores the information (but it's kinda wierdo!).
There's an interesting article and an interesting answer here on SO, which is worth a read!
Don’t do any date-time computations in javascript. You may guess the
browsers time zone to define it, but the definition itself and all
date-time computations must be made in a time-zone aware system.
As you will read this article, you'll get a deeper understanding of the problem "date/dst/utc/timezones in javascript" - therefore it would be interesting if you tell us more about your server-side:
Which framework do you use on your server-side?
Do you have any logic for represeting accounts with some settings (eg custom timezone-settings)?
The "correct" approach (which is fail-safe if you have the backend behind it) will be: let the user work with a datetime - in the browser-scope it's more or less "undefined" (no need to find the timezone, offset, or anything alike!). Now you provide this "undefined" datetime information to the server (eg sending the unix-timestamp with a hiddenfield to the server), where you have the information which actual timezone the user is assigned to. So you can now translate this "undefined" datetime-information to a time-zone aware datetime-object on the server-side and assign the information of your account-scope to it (now the "undefined" datetime-object has a local time-zone - eg "Pacific Daylight Time"). Now you can easily do any conversion you want.
The only downside of this approach is, that you will have 2 scopes of defining a timezone (OS of the user and your webapp) - but anything else is fiddling and not fail-safe!
It may be an idea to send a timestamp to your server, using the getTimezoneOffset method to calculate the UTC date/time client side. To convert it back client side you'd send the timestamp, create a dummy date client side to determine the currend timezone offset (the user may have moved to another timezone!) and create a client side date from that information. Client side you'd do something like:
//[client side send]
var d = new Date(), //now
offset = d.getTimezoneOffset()
UTCTimeStamp = d.getTime()+(60000*offset); // send to server
//[client side receive]
var offset = 60000*new Date().getTimezoneOffset(),
localDate = new Date(timestamp + (offset < 0 ? Math.abs(offset) : -offset));
Click here to do a simple test using this idea.

Categories

Resources