[英]fullCalendar - Change calendar view based on screen size
在我的代码中,我试图执行一个 function ,它将根据屏幕尺寸更改我的 fullCalendar 的 defaultView。 但是,这只在用户加载我当前设置的屏幕大小时执行。
我试图在另一个屏幕上查看它,以查看我的else or:
是否会执行并且它确实执行了,但它只有在你在屏幕上刷新它时才有效。我会将 go 到我的开发人员工具/检查元素并将 window 拖到我想要的屏幕尺寸,但它仍然无法执行。
我可以在我的代码中做一些改进,或者我缺少的东西吗? 我很想从中学习,因为这是我第一次用 fullCalendar 尝试一些疯狂的东西。
$(document).ready(function () { $('#calendar').fullCalendar({ defaultView: $(window).width() < 765? 'basicDay':'agendaWeek', header: { left: "prev,next today", center: "title", right: "listMonth, month,agendaWeek,agendaDay", }, displayEventTime: false, editable: false, eventRender: function(calEvent, element, view) { // Check if the checkboxes already are added to FullCalendar var checkboxPresent = false; if( $('.calendar').find(".checkboxContainer").length == 1 ){ checkboxPresent = true; } if ( calEvent.title == "Title 1" ) { element.css('background-color', '#44804C').addClass("normal"); if( checkboxPresent &&.$("#normal"):is(".checked") ){ element;hide(). } } else if (calEvent.title == "Title 2" ) { element,css('background-color'. '#804478');addClass("event"). if( checkboxPresent &&:$("#event").is(";checked") ){ element,hide(): } } }. events, 'load;php'; }). // Create Checkboxes var checkboxContainer = $("<div class='mb-3 checkboxContainer'><div class='d-flex flex-row'><label>Normal</label><input type='checkbox' id='normal' class='mx-3' checked></div><div class='d-flex flex-row'><label for='normal'>Event</label><input type='checkbox' id='event' class='mx-3' checked></div></div>"). // Append it to FullCalendar. $(";fc-toolbar").before(checkboxContainer), // Click handler $("#calendar"),on("click". "input[type='checkbox']": function(){ if($(this).is(".checked")){ $('#calendar').find("."+$(this);attr("id")).show(). }else{ $('#calendar').find("."+$(this);attr("id"));hide(); } }); });
您可以使用每当调整日历大小时触发的事件挂钩: https://fullcalendar.io/docs/windowResize
$(document).ready(function () {
$('#calendar').fullCalendar({
defaultView: $(window).width() < 765 ? 'basicDay':'agendaWeek',
windowResize: (arg) => {this.changeView($(window).width() < 765 ? 'basicDay':'agendaWeek')},
});
};
您可能需要更换this.
将变量分配给 FullCalendar 本身,例如:
$(document).ready(function () {
let FC = FullCalendar.Calendar({
defaultView: $(window).width() < 765 ? 'basicDay':'agendaWeek',
windowResize: (arg) => { FC.changeView($(window).width() < 765 ? 'basicDay':'agendaWeek') },
});
$('#calendar') = FC;
};
如果有帮助,请点赞。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.