gpt4 book ai didi

javascript - 如何自定义 fullcalendar,一个 javascript 事件日历?

转载 作者:行者123 更新时间:2023-11-29 21:15:44 28 4
gpt4 key购买 nike

我是 javascript 和网络开发的新手。

所以,我使用了 fullcalendar 库 ( https://fullcalendar.io/ ) 制作了一个日历 View ,我想知道我是否可以自己定制它。

这是我的标记代码:

<div id="blueBackground">
<div class="container">
<div id='calendar'></div>
</div>
</div>

因此,“blueBackground”用于将整个网页背景更改为蓝色。 “容器”类,如果用于将全日历调整为更合适的 View 。

这是 Javascript 代码:

$(document).ready(function () {

// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})

});

javascript 代码直接来自 fullcalendar Usage 页面。( https://fullcalendar.io/docs/usage/ )

那么,我该如何定制呢?我是 javascript 的新手。我环顾其他与此类似的问题,但没有结果。我做不到。

提前谢谢你。

最佳答案

我目前也在使用 fullcalendar,这里是我所做的一些定制:

$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
//Changing the header like this:
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},

//Lets us edit in the calendar
editable: true,


//When u select some space in the calendar do the following:
select: function(start, end, allDay){
//do something when space selected
},


//When u click on an event in the calendar do the following:
eventClick: function(event, element) {
//do something when event clicked
},


//When u drop an event in the calendar do the following:
eventDrop: function(event, delta, revertFunc) {
//do something when event is dropped at a new location
},


//When u resize an event in the calendar do the following:
eventResize: function(event, delta, revertFunc) {
//do something when event is resized
},


//Add some test events.
events: [
{
title : 'event1',
start : '2016-09-15'
},
{
title : 'event2',
start : '2016-09-15',
end : '2016-09-16'
},
{
title : 'event3',
start : '2016-09-15T12:30:00',
allDay : false // will make the time show
}
]
})
});

在我的元素中,我还使用 PHP 和 MySQL 来存储和更改事件。除此之外,几乎所有你可以做的定制都是listed in the docs.

编辑 #1如何更改基本颜色设置等:改变整个背景颜色:

<div id="calendar" style="background:#de1f1f;"></div>

更改事件背景颜色(当您拖动新事件时,背景不再是蓝色而是红色):

$(document).ready(function() {
$('#calendar').fullCalendar({
eventBackgroundColor: "#de1f1f"
});
});

更改事件颜色(不再是蓝色而是红色):

$('#calendar').fullCalendar({
events: [
// my event data
],
eventColor: "#de1f1f"
});

更改事件的边框颜色:

$('#calendar').fullCalendar({    
eventBorderColor: "#de1f1f"
});

希望这只是阐明了您可以执行的一些自定义 :)

关于javascript - 如何自定义 fullcalendar,一个 javascript 事件日历?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39484757/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com