CODEWITHSUNDEEP
javascriptjquery-pluginsfullcalendar
JCM
JCM

Reputation: 83

FullCalendar: Changing event start date and time format

I am pulling my Google Calendar feed to fullcalendar. When I view the event details, the start time displays like this: Sun Feb 19 2012 15:00:00 GMT-0500 (Eastern Standard Time). I would prefer if it looked a little more 'normal' - maybe like this: Sunday, February 19, 2012 @ 3:00pm (EST). I have read about formatdate, etc., but I still cannot get a grasp for what I actually need to do to change the format of the date and time. I have been reading related topics in this forum, but at this point they are just confusing me more. Thank you very much in advance for any help! My fullcalendar code is below:

<script type="text/javascript">
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                  eventClick: function(calEvent, jsEvent, view) {
                    $.colorbox({
                        maxWidth:"800px", html:"<h1>"+calEvent.title+"</h1><h2>When</h2><p>"+calEvent.start+"</p><h2>Where</h2><p>"+calEvent.location+"</p><h2>"+calEvent.eventTime+"</h2><p>"+calEvent.description+"</p>"});
                  },
                  events:
                        {
                        url: 'my google calendar feed url'
                        }
            });
        });
</script>

Upvotes: 0

Views: 11520

Answers (1)

Doug
Doug

Reputation: 3312

You want to change the formatDate bit where it says "HH:mm" to the appropriate letters for what you're looking for here.

For what you're after (minus the EST bit which doesn't seem to be in the formatDate function) you're after something like this:

var eventTime = $.fullCalendar.formatDate(calEvent.start, "dddd, MMMM yyyy @ h:sstt")+" to "+
                $.fullCalendar.formatDate(calEvent.end, "dddd, MMMM yyyy @ h:sstt");

Edit: As I understand it...

<script type="text/javascript">
    $(document).ready(function() {
        $('#calendar').fullCalendar({
              eventClick: function(calEvent, jsEvent, view) {
        var eventTime = $.fullCalendar.formatDate(calEvent.start, "dddd, MMMM yyyy @ h:sstt")+" to "+
                        $.fullCalendar.formatDate(calEvent.end, "dddd, MMMM yyyy @ h:sstt");
        $.colorbox({
          maxWidth:"800px",
          html:"<h1>"+calEvent.title+"</h1>"+
             "<h2>When</h2>"+
             "<p>"+eventTime+"</p>"+
               "<h2>Where</h2>"+
               "<p>"+calEvent.location+"</p>"+
               "<p>"+calEvent.description+"</p>"});
        },
        events:
        {
            url: 'my google calendar feed url'
        }
     });
        });
</script>

Upvotes: 3

Related Questions