且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在MySQL数据库中插入值更改jQuery的事件日历事件的背景颜色

更新时间:2023-10-30 15:28:04

你看了API呢?

http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/#选项​​

下面是如何使用您事件生成功能做到这一点:

  ......
事件:功能(开始,结束,回调){
    $阿贾克斯({
        网址:网址,
        数据:JSON-events.php
        成功:功能(数据){
            的console.log(数据);
            //console.log是看你是从服务器实际上(事件文本,颜色,标识.... whaever您发送)接收的,请使用谷歌Chrome,preSS F12打开控制台
            //在这里做你想要从服务器读取的数据无论如果需要任何修改
            //只是使它看起来像这样总算
            // [EVENT0,EVENT1,EVENT2,.....]
            //如果您的活动数组元素是JavaScript对象
            //最后给数组日历:            //回调([EVENT0,EVENT1,EVENT2,......])
        },
        数据类型:/ * XML,JSON,脚本或HTML * /
    });
},
....

如何在阵列中的每个事件对象是什么样子?
http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
该事件的性能是在我贴你上面的页面,但无论如何,
JavaScript对象与可选和必需的属性!我给带,列出所有的例子!您自己决定哪些是有用你的情况:

  {
    ID:值id
    结束:结束日期,//当事件结束 - 必填字段
    启动:开始日期,//当活动开始 - 必填字段
    标题:称号的价值
    文字颜色:颜色值
    产品类别:增加你的风格班,
    的backgroundColor:颜色值
    BORDERCOLOR:颜色值
    编辑:布尔值
}

I have a JQuery event calendar in which events are showing I want a click function that changes the background color of the event and also insert a value for permanent color change. I also want a code that runs that changed color event calendar. This is my event calendar code...

$(document).ready(function () {

    $('#Uploaded').hide();

    $('#chang').click(function () {
        $('#Uploaded').show('slow');
    });

    $('#chang2').click(function () {
        $('#Uploaded').show('slow');
    });

    $('.fc-event-skin').live("click", function () {
        $(this).css('background-color', '#090');
        $(this).css('border-color', '#090');
    });

    $('#calendar').fullCalendar({

        editable: true,
        eventColor: '#cd3427',    
        events: "json-events.php",    
        buttonText: {
            today: 'idag'
        },
        monthNames: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli',
                     'Augusti', 'September', 'Oktober', 'November', 'December'],    
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
                   'Thursday', 'Friday', 'Saturday'],

        eventDrop: function (event, delta) {

            $.ajax({
                type: "POST",
                url: "drag.php",
                data: "date=" + delta + "&id=" + event.id,
                success: function (msg) {
                    //alert( "Data Saved: " + "id="+ event.id +"&date="+ delta );
                }
            });

        },

        loading: function (bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        }

    });

});

Have you read the API at all?

http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/#options

Here is how you do it with Event-generating function:

......
events: function (start, end, callback) {
    $.ajax({
        url: url,
        data: "json-events.php",
        success: function (data) {
            console.log(data);
            //console.log is to see what you are receiving from server actually (event text,color,id....whaever you send), use google chrome, press F12 to open console
            //here you do whatever you want with your data fetched from server if any modification required
            //just make it look like this finally
            //[event0,event1,event2,.....]
            //Where your event array elements are javascript objects
            //finally give the array to the calendar:

            //callback([event0,event1,event2,.....])
        },
        dataType: /* xml, json, script, or html */
    });
},
....

How does each event object within the array look like? http://arshaw.com/fullcalendar/docs/event_data/Event_Object/ The event properties are at the page I posted you above, but anyway a javascript object with optional and required properties! I am giving an example with listing all! You decide for yourself which are useful in your case:

{
    id: "id value", 
    end: "end date", //when event ends - required field
    start: "start date", // when event starts - required field
    title: "title value",
    textColor: "color value",
    className: "add your style Class",
    backgroundColor: "color value",
    borderColor: "color value",
    editable: "boolean value"
}