fullcalendar time format - javascript

Good afternoon, I know that this topic has been discussed on previous ocassions, nevertheless despite the different threads I still can't solve my problem. I am using the full calendar provided at http://arshaw.com/fullcalendar/, and they have two ways of displaying time, "10:30a"-"7p", for example. I want the time displayed on the calendar of events that are not full day, in a format "12:00 pm" or "12:00 am". The problem i'm having is, when you download the fullcalendar you have several files:
fullcalendar.js, fullcalendar.css, fullcalendar.min.js, fullcalendar.print.css, gcal.js, jquery-1.9.1.min, jquery-ui-1.10.2.custom.min
I tried what other threads suggest, which is a change in the fullcalendar.js at the time format and setdefault methods but to no avail. I can even delete the file "fullcalendar.js" and my test still works just fine. I want to know why is this and if the time format is not managed there, where is it managed? Thanks

Use this and it's going to work:
$('#calendar').fullCalendar({
timeFormat: 'hh:mm a'
});

If you are using timelineDay view, I found out that this setting will change the time format:
slotLabelFormat:"HH:mm"

You can use this:
axisFormat: 'h:mm a'

I had the same problem before, this will solve your problem
if you are using version 4, add this object to your fullcalender's object
eventTimeFormat: {
hour: "numeric",
minute: "2-digit",
meridiem: "short",
},

First I think you are confused with so many files, but basically you need only need the minified of the javascript and css to make it work.
Second, I had the same problem when displaying the time correctly. This is what I did, it is a bit of workaround but it worked for me, sorry if its dirty.
When you initialise the calendar you have to put the option for the timeformat so it shows the minutes even if its rounded hours.
jQuery('#calendar').fullCalendar({ timeFormat: 'h:mm t' });
Then it was appearing only the "a" or "p" not "am" or "pm" so I used a little bit of CSS magic to add the "m" at the end, I created the rule:
.fc-time:after { content: "m"; }
now you might mess up with the week view so you add the rule
.fc-axis.fc-time:after { content: " "; }
And now hopefully you have it the way you want.
Regards

in fullcalendar v3, they use moment.js to format time,
you can format using,
timeFormat: 'h:mm A', you can change between quote with input in this moment js docs page

fullcalendar allows you to change the default times by setting the time format (http://arshaw.com/fullcalendar/docs/text/timeFormat/). Probably better than changing the source code.
I think the reason your solution isn't working is because you are including fullcalendar.js and fullcalendar.min.js. These files contain the same code, the second one being a minified version of the first. Minified files are typically used in deployed versions of sites whereas the other version is used in development. So if you want to make changes don't include the minified version

In your scheduler.fullcalendar.js file look for the events:[], and under it add this line timeFormat: 'hh:mm A',
it will show time like this 10:20 PM
and if u want to show time like this 10:20 Pm use small a

Related

How to format hour and minutes in date-fns?

I'm migrating my code from MomentJS to date-fns and having the following issue when setting the hour and minutes.
This is my momentJS that works just fine:
var someDate = moment.utc('2020-07-16T16:35:39.955873Z')) // 2020-07-16T16:35:39.955Z
console.log(someDate.format('MM/DD/YYYY [ at ] LT ')); // 07/16/2020 at 4:35 PM
This is my code using date-fns:
var someTime = zonedTimeToUtc('2020-07-16T16:35:39.955873Z', 'utc'); // 2020-07-16T16:35:39.955Z
console.log(format(new Date(someTime), "MM/dd/yyyy 'at' h:mm a")); // 07/16/2020 at 10:35 AM
so, I want my date-fns code to print
07/16/2020 at 4:35 PM
but it's printing
07/16/2020 at 10:35 AM
Why is that? A simple way to get it to print the date that I want is by removing the "Z" from the value of someTime variable (like this: 2020-07-16T16:35:39.955), then it works, but I don't want to remove it manually. Can anyone tell me what I'm missing or doing wrong? Thanks a lot in advance!
Here's a LIVE DEMO
Try using utcToZonedTime()
To change the displayed date/time returned from format(), you must use either:
utcToZonedTime: when you want to know what the local date is in another timezone
zonedTimeToUtc: when you want to know what a date in another timezone is in the local timezone
Working Demo

JavaScript function to alter date to next week once current date has been reached

Although there are similar threads regarding this issue, I am more concerned about a specific problem and displaying it as a text and not as an alert
So far, I have learned an adequate portion of HTML (I'm still a newbie though). The main reason behind this is because I am publishing a website for my classroom in my school and am constantly looking for ways to add new elements.
My 'Homework' Page has one piece of Homework that we get every week on the same day. Instead of me having to rewrite the due day for the Homework, I want to find a way that will change the date using JavaScript.This is how it looks like currently on my website but I have to manually change it every week.
The date (for example) will have "Monday, 12th of March, 2018" or a similar variation. The coding aspect goes: if we reach the above date in real time, the date is to change to the same day however in the next week. Then the date will say "Monday, 19th of March, 2018" or a similar variation.
Is there anyway to achieve this?
Thanking in advance,
Sincerely,
Shafquat T.
This can fairly be achieved using Date.js
Include <script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script> to your project.
Since you said the due date is always Monday of the next week, you can do something like this
<script>
// Date format
var date_format = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
// Gets the next Monday
var dueDate = Date.next().monday().toLocaleDateString('en-US', date_format);
// Outputs to page
document.getElementById("due_date").innerHTML = dueDate;
</script>
Get date.min.js
Good Luck!

How to avoid time zone issues with JQuery datepicker

I'm using datepicker in an input form, and sending the results through json to a database. I am using this line, to get the date from the datePicker:
date = $("#datepicker").datepicker('getDate');
Now, I would expect this to return 2014-04-03T00:00:00.000Z
But in fact it returns 2014-04-02T22:00:00.000Z
Notice the two hour difference, which unintentionally changes the day of month as well. I have no use for the hours and the smaller time units. However I do want the date to be right, without adding a dreaded +1 to my code. I suspect this has something to do with time zones, but I can't seem to find a solution to it in the documentation, or other Q&A's online. Could anyone point me in the right direction? My time zone is GMT +1 if that matters.
Thanks :)
I solved this a while ago, but forgot to post an answer.
After retrieving date, this is how i fixed it:
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
voilla
I could not figure out what you did there so I came up with a bit of a hackterrific solution.
I took the value of the alt field in UNIX:
$( function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "#",
});
It came out all sorts of weird with 3 extra 0's and a day behind my time zone.
So I figured out the difference and added it on.
var a = document.getElementById("alternate").value; // take alternative field UnixTimeStamp value
a = a.slice(0, -3); // get rid of 3 extra 0's
a = +a + +57000; // convert to Thai time

Moment.js 2 different date strings when i parse using moment gives same value

I am parsing 2 different date strings
var d1 = '2014-02-01T00:00:00.000+0530'
var d2 = '2014-02-23T00:00:00.000+0530'
when i parse them using moment
alert(moment(d1, 'YYYY-MM-dd"T"HH:mm:ss.fffffff"Z"').toDate());
alert(moment(d2, 'YYYY-MM-dd"T"HH:mm:ss.fffffff"Z"').toDate());
both of them print Sat Feb 1 2014 xxxxx
what is wrong with it??
here is the link to the fiddle i created
jsfiddle
I think your moment formatting string is causing you the problem. If I remove this, the dates do not print as the same.
http://jsfiddle.net/K5ub8/7/
EDIT: The specific issue is you are using dd for day, instead of DD. http://momentjs.com/docs/#/parsing/string-format/
Here is your fiddle fixed:
http://jsfiddle.net/K5ub8/9/
However, I am not 100% sure about the fractional seconds, I believe it is SSS instead of fffffff but I would test this if you need to cater for fractional seconds.
I should mention that if you are converting it back into a JavaScript date object anyway with toDate(), then you don't really need the moment formatting parameter as the date will be formatted in JSON Date format.
I would question why you would want to generate a moment formatted date, and then convert it back to JavaScript, a normal practice might be to receive a date in JavaScript format, then create a moment object which you can use to perform calculations and display in a nice user friendly way.
Simple answer: your format was off a bit.
http://jsfiddle.net/K5ub8/8/
After tweaking the format to be 'YYYY-MM-DDTHH:mm:ss.SSSZZ' rather than 'YYYY-MM-dd"T"HH:mm:ss.fffffff"Z"' it worked just fine. When you're trying to debug issues like this, it's always good to keep the format in a separate variable so you can use the same format that you're trying to parse out to display what you're getting. Had you done that, you would have noticed that 'YYYY-MM-dd"T"HH:mm:ss.fffffff"Z"' was messed up due to it printing out 2014-01-Fr"T"11:32:03.fffffff"-08:00". Which obviously isn't quite right.

jQuery masked input - format date as m/d/yyyy or m/dd/yyyy or mm/dd/yyyy or mm/d/yyyy

I want to use the jQuery masked input plugin found here http://digitalbush.com/projects/masked-input-plugin/ to format the date.
I am pulling data from a database to populate the date field when the page loads. The user will then be able to change the date if it is incorrect.
I want people to be able to enter just one number for the month and day instead of having to enter a 0 before a single-digit number. I want them to be able to type 6/13/2010 instead of 06/13/2010. The data from the database might not have 0's in front, though.
I know that anything listed after a ? is optional, but I want characters at the beginning or middle to be optional.
Thanks!
I had a similar requirement recently, and the only thing I could find that didn't require me to do a lot of work on tweaking the plugin was to use this modified date masking plugin that is based on the one you mentioned. It seems to be doing the job so far.
If you want to test it out, head to this page.
The basic implementation we've used with this modified date masker is as follows:
$('#yourInputBoxHere').mask("99/99/9999", {placeholder: 'MM/DD/YYYY' });
I haven't tried it with single digits for dates, but if I were to do it, I'd just change the above expression to this:
$('#yourInputBoxHere').mask("9/9/9999", {placeholder: 'M/D/YYYY' });
I hope this helps.
The short answer is:
It's not possible without tweaking the plugin.
But, your users will thank you a lot if you use the jquery ui datepicker.
It's usage is as simple as:
$("#texbox1").datepicker();
It will show a nice calendar when the inputbox recieves focus.
Hope this helps. Cheers
I am not sure if this addresses your problem but I found this on https://github.com/RobinHerbots/jquery.inputmask:
$('#yourInputBoxHere').datepicker().inputmask("date", { placeholder: "mm/dd/yyyy", yearrange: { minyear: 1700 } });
This will fill in a '0' at the month beginning if you start with a number greater than '1' and for the day if the number is greater than 3, '0' is automatically placed in front.
The yearrange can also specify maxyear, if you need that criteria.
You can leave out the .datepicker() if you don't want the jquery calendar.
Hope this helps!

Categories

Resources