在完整日历中更改事件颜色

Change event colour in fullcalendar

本文关键字：事件 颜色 日历      更新时间：2023-09-26

我正在尝试为事件着色。它从api中获得颜色。我试过这样做，但无论我怎么努力实现它，我都不能让它工作。

这是我通过不同的方法使它工作的两个尝试。

1)

<script>
        $(document).ready(function(){
            $("#calendar").fullCalendar({
                events: "/app/calendar/cal/",
                eventClick: function(event) {
                    window.top.location = "http://127.0.0.1:8000/app/calendar/event/" + event.id;
                },
                eventRender: function(event, element) {
                    $(element).tooltip({title: event.body});
                    $('.fc-content').css("background-color", "red");
                }
            })
        })
    </script>

2)

<script>
        $(document).ready(function(){
            $("#calendar").fullCalendar({
                events: "/calendars/cal/",
                url: 'http://google.com/',
                eventClick: function(event) {
                    window.top.location = "http://127.0.0.1:8000/calendars/event/" + event.id;
                },
                backgroundColor: 'red',
                eventRender: function(event, element) {
                      $(element).tooltip({title: event.body});
                  }
            })
        })
    </script>

可以使用full calendar的eventColor属性

JSFiddle为所有事件设置相同的颜色属性。

更多详细信息请查看:http://fullcalendar.io/docs/event_data/Event_Source_Object/

http://fullcalendar.io/docs/event_data/Event_Object/

<script>
        $(document).ready(function(){
            $("#calendar").fullCalendar({
                events: "/app/calendar/cal/",
                eventClick: function(event) {
                    window.top.location = "http://127.0.0.1:8000/app/calendar/event/" + event.id;
                },
                eventColor: '#378006',
                eventRender: function(event, element) {
                    $(element).tooltip({title: event.body});
                }
            })
        })
    </script>

为设置单个颜色，在事件数组的对象中添加backgroundColor属性。

JSFiddle for individual color.

var events_array = [{
        title: 'Test1',
        start: new Date(2015, 09, 14),
        tip: 'Personal tip 1',
        backgroundColor: 'red'
    }, {
        title: 'Test2',
        start: new Date(2015, 09, 15),
        tip: 'Personal tip 2',
        backgroundColor: 'green'
    }];

你可以指定eventColor: '#yourColor'，不需要在渲染事件中这样做。

如果你想改变单个事件的颜色:http://fullcalendar.io/docs/event_data/Event_Object/#color-options

相关文章：