1

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.

coder
  • 241
  • 5
  • 19

2 Answers2

2

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

Adityarachman
  • 86
  • 5
1

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.

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • Thank you for explanation. I guess I will have to stick to the format the way it is. However, about my second question. How can I make sure that the range is right though. I got it to start from monday's date but it seems like it ends with sunday's date and not friday – coder Jan 11 '17 at 15:24
  • It's because you have got weekends hidden and Sunday as the last day. The date range in the title doesn't take account of hidden columns unfortunately. There is actually an issue open about this: https://github.com/fullcalendar/fullcalendar/issues/2884 . It looks like there was a fix added only 2 days ago, so it might make into into a subsequent release of FullCalendar, but not right now. – ADyson Jan 11 '17 at 15:32
  • P.S. if the answer has helped your understanding (even if it's not the answer you hoped for!) please remember to upvote and/or mark as the accepted answer - thanks :-) – ADyson Jan 11 '17 at 15:33