淘先锋技术网

首页 1 2 3 4 5 6 7

jquery日历是一款基于javascript的插件,用于展示和管理日程安排。它可以让用户方便地添加、编辑、删除和查看日程,还可以根据不同的需求自定义显示格式、日期范围、多语言等设置。


$(document).ready(function(){
  //初始化日历插件
  $('#schedule-calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    selectable: true,
    selectHelper: true,
    editable: true,
    eventLimit: true,
    events: [
      //添加日程数据,可以动态从后台获取
      {
        title: '会议',
        start: '2020-12-02T10:00:00',
        end: '2020-12-02T12:00:00'
      },
      {
        title: '电话拜访',
        start: '2020-12-08T14:30:00',
        end: '2020-12-08T15:30:00'
      },
      ...
    ],
    //点击日程会弹出编辑窗口
    eventClick: function(event) {
      $('#event-title').val(event.title);
      $('#event-start').val(moment(event.start).format('YYYY-MM-DDTHH:mm:ss'));
      $('#event-end').val(moment(event.end).format('YYYY-MM-DDTHH:mm:ss'));
      $('#event-modal').modal();
      //保存修改后的数据
      $('#event-save').unbind().click(function() {
        event.title = $('#event-title').val();
        event.start = $('#event-start').val();
        event.end = $('#event-end').val();
        $('#schedule-calendar').fullCalendar('updateEvent', event);
        $('#event-modal').modal('hide');
      });
    },
    //点击空白日历区域会弹出添加窗口
    select: function(start, end) {
      $('#event-title').val('');
      $('#event-start').val(moment(start).format('YYYY-MM-DDTHH:mm:ss'));
      $('#event-end').val(moment(end).format('YYYY-MM-DDTHH:mm:ss'));
      $('#event-modal').modal();
      //保存新增数据
      $('#event-save').unbind().click(function() {
        var title = $('#event-title').val();
        var start = $('#event-start').val();
        var end = $('#event-end').val();
        //将新的日程添加到日历上
        $('#schedule-calendar').fullCalendar('renderEvent',{
          title: title,
          start: start,
          end: end
        });
        $('#event-modal').modal('hide');
      });
    }
  });
});

jquery日历的日程安排

使用jquery日历可以让日程管理更加高效,方便快捷地记录和查询工作、生活和学习安排。我们可以根据实际需求灵活配置和扩展,实现更多定制化的功能和效果。