CODEWITHSUNDEEP
javascriptjqueryfullcalendar
RenegadeAndy
RenegadeAndy

Reputation: 5690

jQuery Full Calendar event title time is wrong

I have a jQuery Full Calendar in my UI and it looks as follows:

enter image description here

The problem is the 10:00-10:00am portion of the event title, which seemingly is added to the element based upon the event startTime and endTime parameters in the JSON which sets up the UI element. Please see my code section for this here:

jQuery(document).ready(function() {
        jQuery('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month, agendaWeek, agendaDay'
            },
            allDayText: 'All Day',
            columnFormat: {
                month: 'ddd',
                week: 'ddd d/M',
                day: 'dddd d/M'
            },
            editable: false,
            weekends: true,
            timeFormat: 'h:mm-h:mma ',
            axisFormat: 'hh:mma',
            firstDay: 1,
            slotMinutes: 15,
            defaultView: 'month',
            minTime: '10:00',
            maxTime: '17:00',
            monthNames: ["January","February","March","April","May","June","July", "August", "September", "October", "November", "December" ],
            monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","nov","Dec"],
            dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
            dayNamesShort: ["Sun","Mon", "Tue", "Wed", "Thus", "Fri", "Sat"],
            buttonText: {
                today: "Today",
                day: "Day",
                week:"Week",
                month:"Month"
            },
            selectable: true,
            selectHelper: false,
            select: function(start, end, allDay) {

            },

            events: [
                               {
                                        id: "3",
                                        title: "My event title",
                                        start: new Date(2014,10,03,10,0),
                                        end: new Date(2014,10,03,12,0),
                                        allDay: false,
                                        backgroundColor : "#7F97FF",
                                        textColor: "white"
                                    },

The problem is in the UI it shows 10:00-10:00am which doesnt make sense. According to my events code it should start at 10,00,00 and end at 12,00,00 so why doesnt the title match this? Can somebody please help me!

Upvotes: 0

Views: 2835

Answers (1)

ELPM
ELPM

Reputation: 56

Your FullCalendar is not configured correctly since you want the text "Start - End" Time on each event.

 timeFormat: 'h:mm-h:mma ', // the output i.e. "10:00-10:00pm"
 timeFormat: 'h:mma ',      // the output i.e. "10:00pm"

 displayEventEnd : true,    // it will show on all views (Start - End) in your timeFormat

I've updated your JsFiddle, since you forgot to insert the external sources, I've imported the FullCalendar libraries in order to work.

Upvotes: 1

Related Questions