FullCalendar JS modify day Names in mobile

Question

In desktop I want to have ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] days. And in mobile will change to ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].

Answer 1

You can change columnFormat when detect mobile window sizes:

$('#calendar').fullCalendar('option', 'columnFormat', 'dd');

Fiddle

Answer 2

You need to use mobile detect api for that and then you can set two different array for both of the device mobile and desktop.

Please Refer below link for mobile detect API : http://mobiledetect.net/

Answer 3

Thanks Chetan for the reply. I've been using windowResize : https://fullcalendar.io/docs/display/windowResize/ to detect mobile window sizes but my problem is how to insert " dayNamesShort" ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] into the calendar.

Here's my code:

$('#calendar').fullCalendar({
  windowResize: function(view) {
     if ($(window).width() < 768){
         // insert dayNamesShort:  ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] without destorying current events
     }
  }


});