Problem/Motivation
When the screen shrinks, or on mobile, the event display becomes too small to be useful. What I'd like is for the display to toggle to listYear when the screen size is small enough. I'm having trouble getting it going.
In mytheme.libraries.yml I've added:
calendarmobilize:
js:
resources/js/calendarmobilize.js: {}
dependencies:
- core/jquery
- fullcalendar_view/fullcalendar
in mytheme.theme I've added:
function mytheme_page_attachments_alter(&$page) {
// Get the current path
$path = $current_path = \Drupal::service('path.current')->getPath();
// Check if the alias is the one you want
if ($path == '/calendar') {
// Attach the library
$page['#attached']['library'][] = 'mytheme/calendarmobilize';
}
}
In mytheme/resources/js/calendarmobilize.js I've added:
(function ($) {
console.log("document", $( window ).width() );
// shows the width of the page at the start
window.addEventListener('resize', function (event){
if ($(window).width() < 900){
console.log("Mobile detected");
$(".js-drupal-fullcalendar").fullCalendar('changeView', 'listYear');
}
});
}(jQuery));
On window resize, the console throws the error:
Uncaught TypeError: $(...).fullCalendar is not a function.
Am I not going about this the right way? What have people done to make sure their calendars work for mobile?