I am using fullcalendar in my web pages. I have render some data from database in calendar event. I want to event render on different screen sizes. How can I do it. I have follow this code.
<script> $('#calendar').fullCalendar( { header: { left: 'title', center: 'month,agendaWeek,agendaDay,listMonth', right: 'today prev,next' }, events: function( start, end, timezone, callback ) { $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, method: 'GET', url: '<?php echo url("get-data"); ?>?startdate='+start+'&enddate='+end, dataType: 'json', success: function(result) { var events = []; for(var i=0; i < result.length; i++) { events.push({ title: result[i].title, start: result[i].start, constraint: result[i].constraint, color: result[i].color }); } callback(events); }, error: function(e) { } }); } }); </script>
Apply fulcalendar eventRender() function.
eventRender: function (event, element) { var renderReturn = RenderTrueFalse(); if(renderReturn == true) { var sd=parseInt(event.title); element.find('.fc-title').html('').append(sd); } }
call RenderTrueFalse function in below of you calendar code.
function RenderTrueFalse(){ var mq = window.matchMedia( "(max-width: 570px)" ); if (mq.matches) { return true; } else { return false; } }
For example:
<script> $('#calendar').fullCalendar( { header: { left: 'title', center: 'month,agendaWeek,agendaDay,listMonth', right: 'today prev,next' }, events: function( start, end, timezone, callback ) { $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, method: 'GET', url: '<?php echo url("get-data"); ?>?startdate='+start+'&enddate='+end, dataType: 'json', success: function(result) { var events = []; for(var i=0; i < result.length; i++) { events.push({ title: result[i].title, start: result[i].start, constraint: result[i].constraint, color: result[i].color }); } callback(events); }, error: function(e) { } }); }, eventRender: function (event, element) { var renderReturn = RenderTrueFalse(); if(renderReturn == true) { var sd=parseInt(event.title); element.find('.fc-title').html('').append(sd); } } }); function RenderTrueFalse(){ var mq = window.matchMedia( "(max-width: 570px)" ); if (mq.matches) { return true; } else { return false; } } </script>
Question and answer is powered by AnsPress.io