javascript - fullcalendar dynamically change default view based on screen width - Stack Overflow

admin管理员组

文章数量:1023764

I'm using fullcalendar and the below code works for me to render fullcalendar while also using turbolinks.

function eventCalendar() {
  return $('#event_calendar').fullCalendar({
    defaultView: 'agendaWeek',
    header: {
        left: 'prev,today,next',
        center: 'title',
        right: 'agendaDay,agendaWeek'
    },    
  });
};
function clearCalendar() {
  $('#event_calendar').fullCalendar('delete'); // In case delete doesn't work.
  $('#event_calendar').html('');
};
$(document).on('turbolinks:load', eventCalendar);
$(document).on('turbolinks:before-cache', clearCalendar)

However I want to dynamically changeView the defaultView based on screenWidth. Something like this, but it's not working for some reason:

if (window.innerWidth < 800) {
            $('#event_calendar').fullCalendar('changeView', 'agendaDay');
        }

or

if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'agendaDay');
}else{
    $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
}

How can I adapt it to my calendar? Please help!

I'm using fullcalendar and the below code works for me to render fullcalendar while also using turbolinks.

function eventCalendar() {
  return $('#event_calendar').fullCalendar({
    defaultView: 'agendaWeek',
    header: {
        left: 'prev,today,next',
        center: 'title',
        right: 'agendaDay,agendaWeek'
    },    
  });
};
function clearCalendar() {
  $('#event_calendar').fullCalendar('delete'); // In case delete doesn't work.
  $('#event_calendar').html('');
};
$(document).on('turbolinks:load', eventCalendar);
$(document).on('turbolinks:before-cache', clearCalendar)

However I want to dynamically changeView the defaultView based on screenWidth. Something like this, but it's not working for some reason:

if (window.innerWidth < 800) {
            $('#event_calendar').fullCalendar('changeView', 'agendaDay');
        }

or

if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'agendaDay');
}else{
    $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
}

How can I adapt it to my calendar? Please help!

• javascript
• ruby
• fullcalendar
• turbolinks
• fullcalendar-3

Share Improve this question Follow edited Nov 8, 2019 at 11:24 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Nov 8, 2019 at 0:28 YshmarovYshmarov 3,75911 gold badge2828 silver badges4444 bronze badges 1

• what version of fullcalendar are you using? also, how did you install it? – lacostenycoder Commented Nov 8, 2019 at 1:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

If by "dynamically change" you mean you want to change it when the user resizes their browser, then you need to listen for window resize.

$(window).resize(function() {
  if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'agendaDay');
  } else {
    $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
  }
});

But also check your browser console for errors. It looks like as of version 4.0+ those views have been renamed see changelog so you may need to pass different view names like this:

$(window).resize(function() {
  if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'timeGridDay');
  } else {
    $('#event_calendar').fullCalendar('changeView', 'timeGridWeek');
  }
});

If anyone is interested here is how you would do it with React/Typescript.

import React, { FunctionComponent } from 'react';
import FullCalendar, { ViewContentArg } from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const Calendar: FunctionComponent = (): JSX.Element => {
    const handleSize = (event: ViewContentArg): void => {
        let contentAPi = event.view.calendar;
        if (window.innerWidth < 800) {
            contentApi.changeView('timeGridDay');
        } else {
            contentApi.changeView('timeGridWeek');
        }
    }
    return <FullCalendar
        plugins={ [dayGridPlugin, timeGridPlugin, interactionPlugin] }
        windowResize={ handleSize }
    />
}

For version 5:

    //changeViewCaledar: load e resize
    //-----------------------------------------
    const changeViewCaledar = () => {
        if (document.body.clientWidth < 800) {
            calendar.changeView("listMonth");
        } else {
            calendar.changeView("dayGridMonth");
        }        
    }
    changeViewCaledar()

    window.addEventListener("resize", () => {
        changeViewCaledar()
    });
    // -----------------------------------------

https://codepen.io/rsaraceni/pen/zYabYxz?editors=0010

I'm using fullcalendar and the below code works for me to render fullcalendar while also using turbolinks.

function eventCalendar() {
  return $('#event_calendar').fullCalendar({
    defaultView: 'agendaWeek',
    header: {
        left: 'prev,today,next',
        center: 'title',
        right: 'agendaDay,agendaWeek'
    },    
  });
};
function clearCalendar() {
  $('#event_calendar').fullCalendar('delete'); // In case delete doesn't work.
  $('#event_calendar').html('');
};
$(document).on('turbolinks:load', eventCalendar);
$(document).on('turbolinks:before-cache', clearCalendar)

However I want to dynamically changeView the defaultView based on screenWidth. Something like this, but it's not working for some reason:

if (window.innerWidth < 800) {
            $('#event_calendar').fullCalendar('changeView', 'agendaDay');
        }

or

if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'agendaDay');
}else{
    $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
}

How can I adapt it to my calendar? Please help!

I'm using fullcalendar and the below code works for me to render fullcalendar while also using turbolinks.

function eventCalendar() {
  return $('#event_calendar').fullCalendar({
    defaultView: 'agendaWeek',
    header: {
        left: 'prev,today,next',
        center: 'title',
        right: 'agendaDay,agendaWeek'
    },    
  });
};
function clearCalendar() {
  $('#event_calendar').fullCalendar('delete'); // In case delete doesn't work.
  $('#event_calendar').html('');
};
$(document).on('turbolinks:load', eventCalendar);
$(document).on('turbolinks:before-cache', clearCalendar)

However I want to dynamically changeView the defaultView based on screenWidth. Something like this, but it's not working for some reason:

if (window.innerWidth < 800) {
            $('#event_calendar').fullCalendar('changeView', 'agendaDay');
        }

or

if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'agendaDay');
}else{
    $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
}

How can I adapt it to my calendar? Please help!

• javascript
• ruby
• fullcalendar
• turbolinks
• fullcalendar-3

Share Improve this question Follow edited Nov 8, 2019 at 11:24 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Nov 8, 2019 at 0:28 YshmarovYshmarov 3,75911 gold badge2828 silver badges4444 bronze badges 1

• what version of fullcalendar are you using? also, how did you install it? – lacostenycoder Commented Nov 8, 2019 at 1:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

If by "dynamically change" you mean you want to change it when the user resizes their browser, then you need to listen for window resize.

$(window).resize(function() {
  if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'agendaDay');
  } else {
    $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
  }
});

But also check your browser console for errors. It looks like as of version 4.0+ those views have been renamed see changelog so you may need to pass different view names like this:

$(window).resize(function() {
  if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'timeGridDay');
  } else {
    $('#event_calendar').fullCalendar('changeView', 'timeGridWeek');
  }
});

If anyone is interested here is how you would do it with React/Typescript.

import React, { FunctionComponent } from 'react';
import FullCalendar, { ViewContentArg } from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const Calendar: FunctionComponent = (): JSX.Element => {
    const handleSize = (event: ViewContentArg): void => {
        let contentAPi = event.view.calendar;
        if (window.innerWidth < 800) {
            contentApi.changeView('timeGridDay');
        } else {
            contentApi.changeView('timeGridWeek');
        }
    }
    return <FullCalendar
        plugins={ [dayGridPlugin, timeGridPlugin, interactionPlugin] }
        windowResize={ handleSize }
    />
}

For version 5:

    //changeViewCaledar: load e resize
    //-----------------------------------------
    const changeViewCaledar = () => {
        if (document.body.clientWidth < 800) {
            calendar.changeView("listMonth");
        } else {
            calendar.changeView("dayGridMonth");
        }        
    }
    changeViewCaledar()

    window.addEventListener("resize", () => {
        changeViewCaledar()
    });
    // -----------------------------------------

https://codepen.io/rsaraceni/pen/zYabYxz?editors=0010

本文标签： javascriptfullcalendar dynamically change default view based on screen widthStack Overflow