CODEWITHSUNDEEP
dateviewformatfullcalendar
kvs
kvs

Reputation: 101

Changing the format of the day title in weekview

How can I change the formatting of the date in Fullcalendar -> weekview.
It now says: 

Sun 7/24  Mon 7/25  Tue 7/26  Wed 7/27 Thu 7/28 Fri 7/29  Sat 7/30

I want to switch month and day around so it says 

Sun 24/7  Mon 25/7  Tue 26/7 Wed 27/7 Thu 28/7 Fri 29/7  Sat 30/7

which is the way our users are used to in the country where I live/work.

Upvotes: 4

Views: 6910

Answers (5)

Frahim
Frahim

Reputation: 379

You can do this easily with this setting:

'ddd'     // like 'Mon', for month view
'ddd M/D' // like 'Mon 9/7', for week views
'dddd'    // like 'Monday', for day views

Example Fullcalendar

$('#calendar').fullCalendar({ columnFormat: "ddd D/M" });

OR

$('#calendar').fullCalendar({ columnHeaderFormat: "ddd D/M" });

For more details Click here!

Upvotes: 0

user1042094
user1042094

Reputation: 31

There is a mistake, the first character must be lowercase:

columnFormat: { month: 'ddd', week: 'ddd d/M', day: 'dddd d/M' },

Upvotes: 3

kvs
kvs

Reputation: 101

I have found a solution:

columnFormat: {
    month: 'ddd',
    week: 'ddd d/M',
    day: 'dddd d/M'
},

Upvotes: 6

nzn
nzn

Reputation: 1081

You can use this undocumented config variable to make a general change for all appearances of date/month so you don't have to specify it per view:

dayOfMonthFormat: 'ddd DD/MM',

Upvotes: 3

Anantha Sharma
Anantha Sharma

Reputation: 10108

try this then..

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultView: 'basicWeek',
            editable: true,
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1) // change the format here.
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                }

Upvotes: 1

Related Questions