Fullcalendar eventDrop Timezone Issue - fullcalendar

We provide the ability for a user to select their own timezone and call the following when a different timezone is selected (using moment.tz for the options)
$('#calendar2').fullCalendar('option', 'timezone', object.options[object.selectedIndex].value || false);
This works great when viewing appointments etc. However, when a user tries to drag/drop an appointment, it appears to revert back to their "local" PC time to calculate the UTC time value on eventDrop
example:
fullcalendar timezone: 'America/New_York' (but my pc timezone is set to pacific)
Drag event 4pm apt to 12pm. eventDrop
eventDrop: function(event,eventDelta,revertFunc, jsEvent, ui, view) {
event.start.format()
}
Output:
2016-12-23T12:00:00-08:00
You can tell based on the -8:00 offset that it is getting this from my local PC and not from the timezone that was set to 'America/New_York' and it should be -5:00. What is the best way to handle this?
UPDATE: I figured this out using the following code. Basically, you need to take care of converting the timezone yourself. Fullcalendar does not do this for you.
strStartDate = event.start.format("YYYY-MM-DD HH:mm:ss").toString()
var start = moment.tz(strStartDate, $('[data-id="timezone-selector"]').find(':selected').val());
objFCC.saveObject(event.appointmentId, start.valueOf() , mins, strResource, function(result, event)

Related

Fullcalendar Start Hour Setting by the Time of Current Hour

I am trying to use Fullcalendar in AngularJS.
I somehow implemented the calendar and it works (saves data to the SQL).
However, if I click on the day in the calendar, the modal pops up and the start date shows 00:00:00 in time aspect.
My questions is how can you set the time for the hour of current time?
If it is 9AM currently, then, how can the time in the start initialize the time as 09:00:00 ?
This is what I have for the coding.
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
}
I have a feeling that it would be nice to somehow modify the code below and place it within the above code, but I am stuck on where to put it.
var time = new Time();
var h = date.getHour();
I don't know it the Time() even works (it was Date() from other source).
Please can anyone help me on initializing the hour in the Fullcalendar based on the current hour? I am looking for any advice or even a hint to solve this matter.
Thank you in advance!
You can use momentJS to add the current (local) system time to the selected day:
select: function(start, end) {
var today = moment();
start.set({ hours: today.hours(), minute: today.minutes() });
$('#ModalAdd #start').val(start.format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(end.format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
}
See https://momentjs.com/docs/#/get-set/set/
Also it's worth mentioning that start and end are already moments, so you don't need to wrap them in the moment constructor again as you were doing before.
Another thing to consider if you do this, is whether your calendar has other views available, in particular the agenda-style views, on which selections can be made which would trigger the modal? If so, then you need to ensure that the time-manipulation code above only runs when the view is "month", because the agenda view will, by default, already use the time that the user actually chose on the calendar.

How Moment.js can convert UTC time to local time at client side

just see the code first
$(document).ready(function() {
$("[data-utc-time]").text(function () {
var utcTime = $(this).attr("data-utc-time");
return moment.utc(utcTime, 'DD.MM.YYYY HH:mm').local().format('DD.MM.YYYY HH:mm');
});
specially see this line moment.utc(utcTime, 'DD.MM.YYYY HH:mm').local().format('DD.MM.YYYY HH:mm');
i like to know for what basis Moment library convert UTC Time to local time?
how moment will know client is from which time zone area ?
can shade some light on it. thanks
It's running on the client, and thus understands the client's local time. Internally it uses the JavaScript Date object to achieve that, which has local time behavior.

How to set local timezone in Sails.js or Express.js

When I create or update record on sails it write this at updateAt:
updatedAt: 2014-07-06T15:00:00.000Z
but I'm in GMT+2 hours (in this season) and update are performed at 16:00.
I have the same problem with all datetime fields declared in my models.
How can I set the right timezone on Sails (or eventually Express) ?
The way I handled the problem after hours of research :
Put
process.env.TZ = 'UTC'; //whatever timezone you want
in config/bootstrap.js
I solved the problem, you should setting the MySql options file to change timezone to UTC
in the config/connections.js
setting at this
devMysqlServer: {
adapter: 'sails-mysql',
host: '127.0.0.1',
user: 'root',
password: '***',
database: '**',
timezone: 'utc'
},
Trying to solve your problem by setting the timezone on your server is a bit short-sighted. What if you move? Or someone in a different country accesses your application? The important thing is that the timestamps in your database have a timezone encoded in them, so that you can translate to the correct time on the front end. That is, if you do:
new Date('2014-07-06T15:00:00.000Z')
in your browser console, you should see it display the correct date and time for wherever you are. Sails automatically encodes this timestamp for you with the default updatedAt and createdAt fields; just make sure you always use a timezone when saving any custom timestamps to the database, and you should be fine!
The best architecture planning here, IMO, is to continue using Sails.js isoDate formatting. When you're user's load your website/app the isoDate will be converted to their client/browser timezone which is usually set at the OS level.
Here's an example you can test this out with. Open a browser console and run new Date().toISOString() and look at the time it sets. It's going to be based of off the spec for isoDate 8601 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
Now, change your system time to a different time zone or simply change your hour on the time and save (you shouldn't have to reload if you're using chrome console). Run your command in the console again new Date().toISOString() and you'll get an adjusted time appropriate to the time you just changed.
If you'd like to continue on proving to yourself the time Sails.js is appropriate to use, use Moment.js on an isoDate that is stored in your database (created by waterline ORM) like so moment("2016-02-05T22:36:48.800Z").fromNow() and you'll notice the time is relative to your system time.
I've come to grips with not setting a timezone at the app level (I see why the sails authors did it that way), however I've been having a rough time performing a simple date match query. I'd assume that if you create a record using the default blueprint methods (this one containing an extra datetime field over the defaults), passing in a date, that you'd be able to pass in the same date in a get query and get the same record.
For example, let's say the datetime field is called "specialdate". If I create a new record through the api with "specialdate" equaling "06-09-2014" (ignoring time), I haven't been able to run a find query in which I can pass in "06-09-2014" and get that record back. Greater than queries work fine (if I do a find for a date greater than that). I'm sure it's a timezone offset thing, but haven't been able to come up with a solution.

events (as a json feed), start end parameters unix timestamp, are different if I change my OS time zone

I'm using the fullcalendar plugin and would appreciate if someone can give me a hand.
I am getting json events through a PHP URL.
something like this:
$('#calendar').fullCalendar({ events: "/myfeed.php" });
So in my php page that returns the events, I am getting 3 GET parameters:
'_'
'start'
'end'
The start and end parameter, indicate the date in UNIX timestamp.
So far so good, the problem that occurs is that if I change the time zone on my OS. also change these parameters start and end, for the same query in the same day in the calendar.
the weirdest part is that it only happens in Mozilla Firefox.
in Google Chrome, this problem does not occur.
e.g.
I have set my time zone ((UTC-04: 00) Santiago)
I'm referring to the day 09.09.2012 on the agenda,
firebug shows me that these parameters are being sent to my php page
_ 1347245953581
end 1347246000
start 1347159600
but if I change the time zone from my OS to ((UTC-03: 00) Buenos Aires)
consulting on 09.09.2012 on the agenda,
are other parameters which are now sent to the PHP page.
_ 1347246338047
end 1347332400
start 1347246000
Being that it is the same day, are other start and end parameters which are sent to check for events.
There is an ignoreTimezone option on the fullcalendar that might help. I'm not sure if it affects the start/end time passed to the feeds.
http://arshaw.com/fullcalendar/docs/event_data/ignoreTimezone/
Another option is to convert the passed timestamp to a Date object and get the local data from the Date object afterwards and use that in your queries.
Convert a Unix timestamp to time in JavaScript
I know it is not the exact answer, but it might help you out a bit.
Here is a sample piece of PHP code to convert the passed timestamp into a local formatted date:
$startts = $_REQUEST["start"]; // original timestamp
$startdt = new DateTime('now', new DateTimeZone('Europe/Oslo') ); // setup a local datetime
$startdt->setTimestamp($startts); // Set the date based on timestamp
echo $startdt->format('Y-m-d H:i:s'); // Output local date and time

Flex- Time Zone Conversion

How to convert date and time to CDT time Zone in flex4
Regards,
Sushma
The Date object in Flash is always set to the computer's time settings. If the computer is already in the CDT timezone, then just getting any property from the object will be good. However, if you want to do a timezone 'conversion' into a timezone that the computer is not set to, you can get the UTC time and offset it like this:
var date:Date = new Date();
var timezone:int = -5;
date.hours = date.hoursUTC + timezone;
However, you're trying to get the actual CDT time, which only works during the summer in certain areas. For this, it's impossible for Flash to know exactly when that is UNLESS you code the exceptions (ie. if between this date and that date, do -6, else do -5) and you also need to know the actual location of the user (which is impossible through Flash unless the user gives you that info).
Can I ask why you need to know such a thing?

Resources