张康javascript,张康黎

fullcalendar的简单实用

1.

创新互联建站是专业的越城网站建设公司，越城接单;提供做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行越城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleTitle/title

link href='fullcalendar.css' rel='stylesheet' /

/head

body

div id='calendar'/div

/body

script src='jquery.js'/script

script src='moment.min.js'/script

script src='fullcalendar.js'/script

script src='zh-cn.js'/script

script type="text/javascript"

!--数据传输格式为[{"title":"张康大","start":"2019-12-05 09:20:00","end":"2019-12-07 09:20:00"}]--

$('#ename1').change( function(){

    var eid = $("#ename1 option:selected").val()

    var events = {

        url: "/appoint/selectTids",

        type: 'post',

        data: {

          "eid":eid

        }

    }

    $('#calendar').fullCalendar( 'removeEventSource', events)

    $('#calendar').fullCalendar( 'addEventSource', events)

    $('#calendar').fullCalendar( 'refetchEvents' )

}).change()

/script

/html

2.

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleTitle/title

link href='fullcalendar.css' rel='stylesheet' /

style

    #top {

        background: #eee;

        border-bottom: 1px solid #ddd;

        padding: 0 10px;

        line-height: 40px;

        font-size: 12px;

    }

  #calendar {

        margin: 40px auto;

        padding: 0 10px;

    }

    .done:before {

        content:"【 已完成 】";

        background-color:yellow;

        color:green;

        text-align:center;

        font-weight:bold;

        width:100%;

    }

    .doing:before {

        content:"【 未完成 】";

        background-color:yellow;

        color:red;

        text-align:center;

        font-weight:bold;

    }

/style

/head

body

div id='calendar'/div

/body

script src='jquery.js'/script

script src='moment.min.js'/script

script src='fullcalendar.js'/script

script src='zh-cn.js'/script

script type="text/javascript"

$(document).ready(function() {

    var initialLangCode = 'en';

    $('#calendar').fullCalendar({

        header: {

            left: 'prev,next today',

            center: 'title',

            right: 'month,agendaWeek,agendaDay'

        },

        weekends: true,

        weekMode: 'liquid',

        defaultView: 'month',

        allDayText: '全天',

        businessHours: true,

        defaultEventMinutes: 120,

        eventLimit: true,

        dayClick : function(date,id) {

            console.log('dayClick触发的时间为：', date.format());

var da=new Date(date);

var b=da.getHours()-8; 

var date1=new Date(da.setHours(b));

var a=da.getMinutes()+30;

alert(date1);

var date2=new Date(date1.setMinutes(a));

alert(date2);

alert(id);

alert(data-date);

        },

        //设置是否可被单击或者拖动选择

        selectable: true,

        //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用

        selectHelper: true,

        //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消

        unselectAuto: true,

        select: function( start, end ){

            console.log('select触发的开始时间为：', start.format());

            console.log('select触发的结束时间为：', end.format());

        },

        eventClick : function( event ){

            console.log('eventClick中选中Event的id属性值为：', event.id);

            console.log('eventClick中选中Event的title属性值为：', event.title);

            console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm'));

            console.log('eventClick中选中Event的end属性值为：', event.end==null?'无':event.end.format('YYYY-MM-DD HH:mm'));

            console.log('eventClick中选中Event的color属性值为：', event.color);

            console.log('eventClick中选中Event的className属性值为：', event.className);

        },

        eventMouseover : function( event ) {

            console.log('鼠标经过 ...');

            console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);

        },

        eventMouseout : function( event ) {

            console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);

            console.log('鼠标离开 ...');

        },

        //Event是否可被拖动或者拖拽

        editable: true,

        //Event被拖动时的不透明度

        dragOpacity: 0.5,

        eventDrop : function( event, dayDelta, revertFunc ) {

            //do something here...

            console.log('eventDrop --- start ---');

            console.log('eventDrop被执行，Event的title属性值为：', event.title);

            if(dayDelta._days != 0){

                console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！');

            }else if(dayDelta._milliseconds != 0){

                console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');

            }else{

                console.log('eventDrop被执行，Event的start和end时间没有改变！');

            }

            console.log('eventDrop --- end ---');

        },

        eventResize : function( event, dayDelta, revertFunc ) {

            console.log(' --- start --- eventResize');

            console.log('eventResize被执行，Event的title属性值为：', event.title);

            if(dayDelta._days != 0){

                console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！');

            }else if(dayDelta._milliseconds != 0){

                console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');

            }else{

                console.log('eventResize被执行，Event的start和end时间没有改变！');

            }

            console.log('--- end --- eventResize');

        },

    });

//初始化语言选择的下拉菜单值

    $.each($.fullCalendar.langs, function(langCode) {

        $('#lang-selector').append(

                $('option/')

                        .attr('value', langCode)

                        .prop('selected', langCode == initialLangCode)

                        .text(langCode)

        );

    });

    //当选择一种语言时触发

    $('#lang-selector').on('change', function() {

        if (this.value) {

            $('#calendar').fullCalendar('option', 'lang', this.value);

        }

    });

events: [

            {

                id: 1,

                title: '这是一个all-day数据',

                allDay: true,

                start: '2018-12-11'

            },

            {

                id: 2,

                title: '开始时间为12PM',

                start: '2018-12-11 12:00'

            },

            {

                id: 3,

                title: '给一点颜色',

                start: '2018-12-4',

                color: 'red'

            },

            {

                id: 4,

                title: '使用className:done',

                start: '2018-12-10 09:00',

                end: '2018-12-11 18:00',

                color: 'blue',

                className: 'done'

            },

            {

                id: 5,

                title: '使用className:doing',

                start: '2018-12-11 09:00',

                end: '2018-12-12 18:00',

                color: 'green',

                className: 'doing'

            },

            {

                id: 6,

                title: '使用URL和字体颜色',

                start: '2019-12-4',

                color: 'pink',

                url: '',

                className: 'doing',

                textColor: 'black'

            },

            {

                id: 7,

                title: '使用backgroundColor和borderColor',

                start: '2018-12-11 09:00',

                end: '2018-12-12 18:00',

                backgroundColor: 'gray',

                borderColor: 'red',

                className: 'done'

            },

        ]

});

/script

/html