I am using Ruby 2 Rails 4. I am using the twitter-bootstrap-rails pearl to make my browser crash when the browser is resized.
I need a similar effect with Adam Shaw FullCalendar. Right now it will resize using the window, but I want it to be displayed in one day (basicDay view) when the browser has a resolution of 480 pixels or lower, one week (basicWeek view) when the viewport is less than 767 and the month view is in full-sized window.
Should I initialize three different calendars in case of browsers of different sizes?
t
<script> $(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ events: 'http://www.google.com/calendar/myfeed', if $(window).width() < 514){ defaultView: 'basicDay' } header: { left: 'title', center: '', right: 'today basicDay basicWeek month prev,next' }, }); }); </script>
Or is there a much simpler and simpler solution?
Also, I'm really new to this, I know that the above code example will not work as it is written, but at least am I on the right track?
Thank you and sorry if it was written somewhere else, I could not find it, but would be glad if someone pointed me in the right direction.
UPDATE:
In response to the first comment, to make it work, I went into fullcalendar.js and changed the way the main rendering works (line 240)
/* Main Rendering -----------------------------------------------------------------------------*/ setYMD(date, options.year, options.month, options.date); function render(inc) { if (!content) { initialRender(); } else if (elementVisible()) { // mainly for the public API calcSize(); _renderView(inc); } } function initialRender() { tm = options.theme ? 'ui' : 'fc'; element.addClass('fc'); if (options.isRTL) { element.addClass('fc-rtl'); } else { element.addClass('fc-ltr'); } if (options.theme) { element.addClass('ui-widget'); } content = $("<div class='fc-content' style='position:relative'/>") .prependTo(element); header = new Header(t, options); headerElement = header.render(); if (headerElement) { element.prepend(headerElement); } changeView(options.defaultView); if (options.handleWindowResize) { $(window).resize(windowResize); } // needed for IE in a 0x0 iframe, b/c when it is resized, never triggers a windowResize if (!bodyVisible()) { lateRender(); } // added this to specify how initial rendering should act on mobile devices. if ( $(window).width() < 480){ changeView('agendaDay') }; }
As you can see, I added "if ($ (window) .width ...", however this is not a great solution, because it solves only half of my problem. Mobile and browser windows, but the calendar does not respond to resizing in browser windows The inclusion of the MarCrazyness answer in the solution above resolved the resizing problem in browsers.
Now my view is as follows:
Schedule.html.erb $ (document) .ready (function () {
$('#calendar').fullCalendar({ events: 'http://www.google.com/calendar/...', weekMode: 'liquid', defaultView: 'agendaWeek', allDaySlot: false, header: { left: 'title', center: 'agendaDay,agendaWeek,month', right: 'today prev,next' }, windowResize: function(view) { if ($(window).width() < 514){ $('#calendar').fullCalendar( 'changeView', 'agendaDay' ); } else { $('#calendar').fullCalendar( 'changeView', 'agendaWeek' ); } } }); }); </script>
Note. I changed the header settings, but this is by no means necessary for this solution.
We hope that one or a combination of these two tactics will satisfy your needs, if you have a solution that is easier or will facilitate or answer, please jump in and thank you all for all the help.