CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Ham
Ham

Reputation: 814

Full calendar change date format in week view

I'm using FullCalendar plugin for jQuery in my project. In fullCalendar week view, I can see a row showing the date in following format:-

Sunday 9/6, Monday 9/7, Tuesday 9/8 so on...

Actually, I wish to reverse the position of month/day to day/month.

How shall I initialize the setting? Thanks!

Upvotes: 17

Views: 20784

Answers (5)

Amrehan
Amrehan

Reputation: 11

views: {
  week: {
    dayHeaderFormat: {
      // year: 'numeric',
      // month: '2-digit',
      day: '2-digit',
      weekday: 'short',
    },
  },
},

Updated answer: 2023 Output will be: eg: 22 Sun

Upvotes: 1

gihandilanka
gihandilanka

Reputation: 615

You can use any type of date format using moment, this is for the fullcalendar V5 (Version 5).
This is the fullcalendar configuration option.

dayHeaderFormat: this.dayHeaderFormatUsingMoment,

This is the javascript function.

dayHeaderFormatUsingMoment(info) {
    return moment(info.date.marker).format("ddd, DD/MM/YYYY"); //output : Tue, 21/07/2020
}

Upvotes: 1

Ben
Ben

Reputation: 337

For those who are using the FullCalendar v3
It seems that the configuration has changed.

You can use the columnHeader Format, Text, or Html properties
As explained in this very nice documentation:
https://fullcalendar.io/docs/date-display

And apply them to different views following this one:
https://fullcalendar.io/docs/view-specific-options

Upvotes: 1

ganeshk
ganeshk

Reputation: 5621

You need to use the columnFormat option to customize this.

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

Demonstrated in this fiddle. Let me know if this helps!

Upvotes: 23

zelazowy
zelazowy

Reputation: 1056

Look at title_format option in fullcalendar documentation: http://arshaw.com/fullcalendar/docs/text/titleFormat/ and set desired format in fullcalendar options.

You can also look here for format options for all calendar views.

Upvotes: 2

Related Questions