CODEWITHSUNDEEP
javascriptfullcalendartitle
coder
coder

Reputation: 251

fullcalendar how to set titleFormat to m/d/yyyy - m/d/yyyy

How can I set the titleFormat so that title of the calendar would look something like 1/9/2017 - 1/13/2017 (no saturday and sunday only monday through friday) Currently my calendar looks like this at the start and title looks like 1/9 – 15/2017 (which is not what i want)

  $('#calendar').fullCalendar({

            header: {
                left: 'prev title next today',
                right: ''
            },
            weekends: false,
            titleFormat: "M/D/Y",
            editable: false,
            firstDay: 1,
            disableDragging: true,
            displayEventEnd: true,
            views: {
                week: {
                    type: 'basicWeek',
                    duration: {
                        days: 7
                    },
                    columnFormat: 'dddd M/D/Y'// Format the day to show full weekday and its date
                }
            },

Please assist.

Upvotes: 1

Views: 4254

Answers (2)

Adityarachman
Adityarachman

Reputation: 86

You can create your own title format by using viewRender attribute.

The first thing is, you have to change the titleFormat into like this :

titleFormat: "YYYY/MM/DD"

The title should be like this right now :

2018/05/27 – 2018/06/02

And then you can reformat the title by using viewRender attribute like this :

 viewRender: function (view, element) {

                //reformat title date for week mode
                if (view.type == "agendaWeek") {

                    //Get the start date value and reformat the date
                    var startDate = moment(view.title.split("–")[0].replace(" ", "")).format("M/D/YYYY");

                    //You can set the day range depending on what you need
                    //If you only want to show dates from Monday to Friday, then you can get the end date value by adding 4 days from the start date
                    var endDate = moment(startDate).add(4, "days").format("M/D/YYYY");

                    //Override the fullcalendar title here
                    $(".fc-center h2").text(startDate + " – " + endDate);
                }

            }

You can read the answer for your second question here : FullCalendar show only weekDays

Upvotes: 2

ADyson
ADyson

Reputation: 61839

Sorry, but you can't.

Internally, FullCalendar uses its formatRange method to format the title (see https://fullcalendar.io/docs/utilities/formatRange/). This takes the given format and "intelligently" (its words not mine) splits the format and puts a dash between the two dates, so that you get the specified date format once, but with 2 days and a dash in between. So you might show something like "Jan 1st - 31st, 2017" (titleFormat: "MMM Do, Y").

In any case, you're actually trying to show info that is effectively redundant - you want to display the month twice, and the year twice. The user can see what month and year it is quite happily with it only displayed once.

Upvotes: 1

Related Questions