VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/Views/Home/Calendar.cshtml

@using VberAdmin.Web.Models.Input
@using VberAdmin.Web.Models.Modals

@{
    ViewBag.ActiveMenu = PermissionNames.Vber;
    ViewBag.Title = L("MyCalendar");
    string notifyType = ViewBag.NotifyType;
    var m_body = new VmModalBody().AddInputs(new List<VmInputBase>()
    {
        new VmInputHidden("id"),
        new VmInput("title", "日程名称").WithRequired(),
        new VmInputTextarea("description", "日程详情").WithRequired(),
        new VmInputCheckBox("allDay","").AddItems(new VmInputCheckBoxRadioItem("全天日程","true").WithOther("data-vb-calendar-input=\"allDay\"")),

    }).AddGroup(new List<VmInputBase>()
    {
        new VmInputDate("start","开始日期").WithRequired(),
        new VmInputDate("end","结束日期").WithRequired(),
    }).AddGroup(new List<VmInputBase>()
    {
        new VmInputDateTime("startTime","").WithOnlyTime().WithOther("data-vb-calendar-input=\"time\""),
        new VmInputDateTime("endTime","").WithOnlyTime().WithOther("data-vb-calendar-input=\"time\""),
    }).AddInputs(new List<VmInputBase>()
    {
        new VmInput("notifyType","通知方式").WithSelect(notifyType,isMultiple:true),
        new VmInputRadio("style", "日程样式").AddItems(
            new VmInputCheckBoxRadioItem("<div class=\"bg-primary text-inverse-primary px-3 py-1\">样式1</div>", "1").WithClass("text-primary"),
            new VmInputCheckBoxRadioItem("<div class=\"bg-success text-inverse-success px-3 py-1\">样式2</div>", "2").WithClass("text-success"),
            new VmInputCheckBoxRadioItem("<div class=\"bg-info text-inverse-info px-3 py-1\">样式3</div>", "3").WithClass("text-info"),
            new VmInputCheckBoxRadioItem("<div class=\"bg-danger text-inverse-danger px-3 py-1\">样式4</div>", "4").WithClass("text-danger"),
            new VmInputCheckBoxRadioItem("<div class=\"bg-warning text-inverse-warning px-3 py-1\">样式5</div>", "5").WithClass("text-warning"),
            new VmInputCheckBoxRadioItem("<div class=\"bg-dark text-inverse-dark px-3 py-1\">样式6</div>", "6").WithClass("text-dark")
        ).WithRequired(),
    });

    var modal = new VmModal().WithOther("data-vb-calendar-modal").WithHeaderAndFooter("日程","").WithBody( m_body);
}
@section css{
    <link href="/Metronic/assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" />
}
@section styles
{

    <style>
        .fc .fc-list-empty-cushion {
            color: #dc3545 !important;
            font-size: 1.75rem;
        }
    </style>
}
<div class="container">
<div class="card">
    <div class="card-header">
        <h2 class="card-title fw-bolder">我的日程</h2>
        <div class="card-toolbar">
            <a href="#" type="button" class="btn btn-flex btn-primary" data-vb-calendar-btn="add">
                <!--Svg Icon | path: icons/duotone/Navigation/Plus.svg-->
                <span class="svg-icon svg-icon-2">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1" />
                        <rect fill="#000000" opacity="0.5" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000)" x="4" y="11" width="16" height="2" rx="1" />
                    </svg>
                </span>添加日程</a>
        </div>
    </div>
    <div class="card-body">
        <div data-vb-calebdar=""></div>
    </div>
</div>
</div>

@await Html.PartialAsync("_Modal", modal)

@section scripts
{
    <script src="/Metronic/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js" asp-append-version="false"></script>

    <script>
        var VbCalendar = function() {
            const
                DATA = "calendar",
                EVENT_KEY = `.${DATA}`,
                BTN = 'vb-calendar-btn',
                ClassName = {
                    CALENDAR_BODY: `vb-calebdar`,
                    BTN_MORE_VIEW: `more-view-btn_${DATA}`,
                    BTN_ADD: `${BTN}="add"`,
                    BTN_EDIT: `${BTN}="edit"`,
                    BTN_DELETE: `${BTN}="delete"`,
                    BTN_SUBMIT: `${BTN}="submit"`,
                    BTN_CANCEL: `${BTN}="cancel"`,
                    BTN_CLOSE: `${BTN}="close"`,
                    MODAL: `vb-calendar-modal`,
                    MODAL_VIEW: `modal_view`,
                    TITLE: `title`,
                    DESCRIPTION: `description`,
                    ALL_DAY: 'allDay',
                    START_DATE: 'startDate',
                    START_TIME: 'startTime',
                    END_DATE: 'endDate',
                    END_TIME: 'endTime',
                    STYLE: 'style',
                    DETAIL: "vb-calendar-detail"
                },
                Selector = {
                    CALENDAR_BODY: `[data-${ClassName.CALENDAR_BODY}]`,
                    BTN_MORE_VIEW: `#${ClassName.BTN_MORE_VIEW}`,
                    BTN_ADD: `[data-${ClassName.BTN_ADD}]`,
                    BTN_EDIT: `[data-${ClassName.BTN_EDIT}]`,
                    BTN_DELETE: `[data-${ClassName.BTN_DELETE}]`,
                    MODAL: `[data-${ClassName.MODAL}="modal"]`,
                    MODAL_VIEW: `#${ClassName.MODAL_VIEW}`,
                    FORM_TITLE: `[name="${ClassName.TITLE}"]`,
                    FORM_DESCRIPTION: `[name="${ClassName.DESCRIPTION}"]`,
                    FORM_ALL_DAY: `[name="${ClassName.ALL_DAY}"]`,
                    FORM_START_DATE: `[name="${ClassName.START_DATE}"]`,
                    FORM_START_TIME: `[name="${ClassName.START_TIME}"]`,
                    FORM_END_DATE: `[name="${ClassName.END_DATE}"]`,
                    FORM_END_TIME: `[name="${ClassName.END_TIME}"]`,
                    FORM_STYLE: `[name="${ClassName.STYLE}"]`,
                    DETAIL_TITLE: `[data-${ClassName.DETAIL}="${ClassName.TITLE}"]`,
                    DETAIL_DESCRIPTION: `[data-${ClassName.DETAIL}="${ClassName.DESCRIPTION}"]`,
                    DETAIL_ALL_DAY: `[data-${ClassName.DETAIL}="${ClassName.ALL_DAY}"]`,
                    DETAIL_START_DATE: `[data-${ClassName.DETAIL}="${ClassName.START_DATE}"]`,
                    DETAIL_END_DATE: `[data-${ClassName.DETAIL}="${ClassName.END_DATE}"]`,
                    TIME: `[data-vb-calendar-input="time"]`
                };

            let $fullCalendar,
                fullCalendar,
                _triggerChangeEvent = true,
                popoverIsInit = false,
                popover,
                $modal,
                $form,
                today,
                calendarData = {
                    id: "",
                    eventName: "",
                    eventDescription: "",
                    startDate: "",
                    endDate: "",
                    allDay: false,
                    notifyType: "",
                    style: "",
                    backgroundColor: "",
                    borderColor: "",
                    textColor: ""
                };

            const
                popoverDestroy = function() {
                    popoverIsInit && (popover.dispose(), popoverIsInit = false);
                },
                loadEvent= (info, successCallback) => {
                    console.log("Calendar Events Load From: 【" + info.startStr + "】 To  【" + info.endStr + "】");

                    $.vbAjax4({
                        url: abp.appUrl + "calendar/getAll",
                        data: {
                            SearchList: [
                                {
                                    "KeyField": "start",
                                    "KeyWords": info.start
                                },
                                {
                                    "KeyField": "end",
                                    "KeyWords": info.end
                                }
                            ]
                        },
                        success: function(res) {
                            successCallback(res);
                        }
                    });
                },
                submit = (type) => {
                    let data = $form.formSerialize();
                    var $checkedStyle = $form.find(Selector.FORM_STYLE + ':checked').next().find('div').eq(0);
                    data.colors = $checkedStyle.css('color') +
                        "|" +
                        $checkedStyle.css('background-color') +
                        "|" +
                        $checkedStyle.css('background-color');
                    data.start = data.start + (data.startTime ? " " + data.startTime : "");
                    data.end = data.end + (data.endTime ? " " + data.endTime : "");
                    if (new Date(data.end) <= new Date(data.start)) {
                        abp.message.warn("开始日期不能小于结束日期");
                        return;
                    }
                    $.vbAjax({
                        url: abp.appUrl + `Calendar/${type == "add" ? "Create" : "Update"}`,
                        data: data,
                        success: (res) => {
                            $modal.VbModal('hide');
                            if (type == "add") {
                                let newEvent = {
                                    id: res.id,
                                    title: res.title,
                                    description: res.description,
                                    backgroundColor: res.backgroundColor,
                                    borderColor: res.borderColor,
                                    textColor: res.textColor,
                                    colors: res.colors,
                                    notifyType: res.notifyType,
                                    allDay: res.allDay,
                                    start: moment(res.start).format(),
                                    end: moment(res.end).format()
                                }
                                fullCalendar.addEvent(newEvent);
                            } else {
                                var event = fullCalendar.getEventById(res.id);
                                _triggerChangeEvent = false;
                                event.setStart(res.start);
                                event.setEnd(res.end);
                                event.setAllDay(res.allDay);
                                event.setProp("title", res.title);
                                event.setProp("backgroundColor", res.backgroundColor);
                                event.setProp("borderColor", res.borderColor);
                                event.setProp("textColor", res.textColor);
                                event.setExtendedProp("description", res.description);
                                event.setExtendedProp("notifyType", res.notifyType);
                                event.setExtendedProp("colors", res.colors);
                                _triggerChangeEvent = true;
                            }
                        },
                        error:() => {
                            fullCalendar.refetchEvents();
                        }
                    });
                },
                add = () => {
                    $modal.VbModal({
                        opTitle: "添加",
                        data: {
                            start: calendarData.startDate,
                            end: calendarData.endDate,
                            notifyType: 1,
                            style: 1,
                            allDay: "true"
                        },
                        showAfter: () => {
                            $(Selector.TIME).closest('.flex-column').addClass('d-none');
                        },
                        save: () => { submit("add"); }
                    });
                },
                update = () => {
                    $(Selector.MODAL_VIEW).VbModal('hide');
                    $modal.VbModal({
                        opTitle: "修改",
                        data: {
                            id: calendarData.id,
                            title: calendarData.eventName,
                            description: calendarData.eventDescription,
                            start: moment(calendarData.startDate).format("YYYY-MM-DD HH:mm"),
                            startTime: moment(calendarData.startDate).format("HH:mm"),
                            end: moment(calendarData.endDate).format("YYYY-MM-DD HH:mm"),
                            endTime: moment(calendarData.endDate).format("HH:mm"),
                            notifyType: calendarData.notifyType,
                            style: calendarData.style,
                            allDay: calendarData.allDay + ""
                        },
                        showAfter: () => {
                            calendarData.allDay ? $(Selector.TIME).closest('.flex-column').addClass('d-none') : $(Selector.TIME).closest('.flex-column').removeClass('d-none');
                        },
                        save: () => { submit("update"); }
                    });
                },
                change = (event, successCallBack, errCallback) =>{
                    let data = {
                        id: event.id,
                        title: event.title,
                        start: event.startStr || event.start,
                        end: event.endStr || event.end,
                        allDay: event.allDay,
                        description: event.description || event.extendedProps.description,
                        notifyType: (event.notifyType || event.extendedProps.notifyType).join(","),
                        colors: event.colors || event.extendedProps.colors
                    };
                    $.vbAjax4({
                        url: abp.appUrl + "Calendar/Update",
                        data: data,
                        success: function (res) {
                            if (successCallBack) {
                                successCallBack.call(res);
                            }
                        },
                        error: function (error) {
                            console.log(error);
                            abp.message.error(error.message).done(function () {
                                fullCalendar.getEventById(event.id).remove();
                                if (errCallback) {
                                    errCallback.call();
                                }
                            });
                        }
                    });
                },
                delete_ = () => {
                    MsgConfirm("确认删除 [" + calendarData.eventName + "] 日程事件吗？", "确认删除", () =>{
                            $.vbAjax1({
                                url: abp.appUrl + "Calendar/Delete?id=" + calendarData.id,
                                success:  () =>{
                                    fullCalendar.getEventById(calendarData.id).remove();
                                    $(Selector.MODAL_VIEW).VbModal('hide');
                                }
                            });
                        });
                },
                createViewModal = () => {
                    let allDayStr, startStr, endStr;
                    calendarData.allDay
                        ? (allDayStr = "全天", startStr = moment(calendarData.startDate).format("YYYY-MM-DD"), endStr = !calendarData.endDate ? "" : moment(calendarData.endDate).format("YYYY-MM-DD"))
                        : (allDayStr = "", startStr = moment(calendarData.startDate).format("YYYY-MM-DD HH:mm"),
                            endStr = moment(calendarData.endDate).format("YYYY-MM-DD HH:mm"));
                    $(document).VbModal('create',
                        {
                            modalId: ClassName.MODAL_VIEW,
                            title: "",
                            dialogClass: "mw-650px",
                            modalHeader: `<div class="modal-header pt-5 pb-0 border-0 justify-content-end">
												<div class="btn btn-icon btn-sm btn-color-gray-400 btn-active-icon-primary me-2" data-bs-toggle="tooltip" data-bs-dismiss="click" title="修改日程" data-${ClassName.BTN_EDIT}>
													<!--Svg Icon | path: icons/duotone/General/Edit.svg-->
													<span class="svg-icon svg-icon-2">
														<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
															<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
																<rect x="0" y="0" width="24" height="24" />
																<path d="M7.10343995,21.9419885 L6.71653855,8.03551821 C6.70507204,7.62337518 6.86375628,7.22468355 7.15529818,6.93314165 L10.2341093,3.85433055 C10.8198957,3.26854411 11.7696432,3.26854411 12.3554296,3.85433055 L15.4614112,6.9603121 C15.7369117,7.23581259 15.8944065,7.6076995 15.9005637,7.99726737 L16.1199293,21.8765672 C16.1330212,22.7048909 15.4721452,23.3869929 14.6438216,23.4000848 C14.6359205,23.4002097 14.6280187,23.4002721 14.6201167,23.4002721 L8.60285976,23.4002721 C7.79067946,23.4002721 7.12602744,22.7538546 7.10343995,21.9419885 Z" fill="#000000" fill-rule="nonzero" transform="translate(11.418039, 13.407631) rotate(-135.000000) translate(-11.418039, -13.407631)" />
															</g>
														</svg>
													</span>
												</div>
												<div class="btn btn-icon btn-sm btn-color-gray-400 btn-active-icon-danger me-2" data-bs-toggle="tooltip" data-bs-dismiss="click" title="删除日程"  data-${ClassName.BTN_DELETE}>
													<!--Svg Icon | path: icons/duotone/General/Trash.svg-->
													<span class="svg-icon svg-icon-2">
														<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
															<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
																<rect x="0" y="0" width="24" height="24" />
																<path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
																<path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
															</g>
														</svg>
													</span>
												</div>
												<div class="btn btn-icon btn-sm btn-color-gray-500 btn-active-icon-primary" data-bs-toggle="tooltip" title="关闭详情" data-bs-dismiss="modal">
													<!--Svg Icon | path: icons/duotone/Navigation/Close.svg-->
													<span class="svg-icon svg-icon-1">
														<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
															<g transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)" fill="#000000">
																<rect fill="#000000" x="0" y="7" width="16" height="2" rx="1" />
																<rect fill="#000000" opacity="0.5" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000)" x="0" y="7" width="16" height="2" rx="1" />
															</g>
														</svg>
													</span>
												</div>
											</div>`,
                            modalBody: `<form>
                                        <div class="d-flex">
											<!--Svg Icon | path: icons/duotone/Interface/Calendar.svg-->
											<span class="svg-icon svg-icon-1 svg-icon-muted me-5">
												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
													<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M6 3C6 2.44772 6.44772 2 7 2C7.55228 2 8 2.44772 8 3V4H16V3C16 2.44772 16.4477 2 17 2C17.5523 2 18 2.44772 18 3V4H19C20.6569 4 22 5.34315 22 7V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V7C2 5.34315 3.34315 4 5 4H6V3Z" fill="#191213" />
													<path fill-rule="evenodd" clip-rule="evenodd" d="M10 12C9.44772 12 9 12.4477 9 13C9 13.5523 9.44772 14 10 14H17C17.5523 14 18 13.5523 18 13C18 12.4477 17.5523 12 17 12H10ZM7 16C6.44772 16 6 16.4477 6 17C6 17.5523 6.44772 18 7 18H13C13.5523 18 14 17.5523 14 17C14 16.4477 13.5523 16 13 16H7Z" fill="#121319" />
												</svg>
											</span>
											<div class="mb-5">
												<div class="d-flex align-items-center mb-2">
													<span class="fs-3 fw-bolder me-3" data-vb-calendar-detail="title">${calendarData.eventName}</span>
													<span class="badge badge-light-success" data-vb-calendar-detail="allDay">${allDayStr}</span>
												</div>
												<div class="fs-6" data-vb-calendar-detail="description">${calendarData.eventDescription ? calendarData.eventDescription : "--"}</div>
											</div>
										</div>
										<div class="d-flex align-items-center mb-2">
											<!--Svg Icon | path: icons/duotone/Design/Circle.svg-->
											<span class="svg-icon svg-icon-1 svg-icon-success me-5">
												<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<circle fill="#000000" cx="12" cy="12" r="8" />
												</svg>
											</span>
											<div class="fs-6">
												<span class="fw-bolder">开始日期：</span>
												<span data-vb-calendar-detail="startDate">${startStr}</span>
											</div>
										</div>
										<div class="d-flex align-items-center mb-3">
											<!--begin::Icon-->
											<span class="svg-icon svg-icon-1 svg-icon-danger me-5">
												<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<circle fill="#000000" cx="12" cy="12" r="8" />
												</svg>
											</span>
											<div class="fs-6">
												<span class="fw-bolder">结束日期：</span>
												<span data-vb-calendar-detail="endDate">${endStr}</span>
											</div>
										</div>
                                        </form>`,
                            modalFooter: '',
                            shown: (e) => {
                                //console.log(e);
                                //let $modal_view = $('#modal_view');
                                $(e).find(Selector.BTN_EDIT).on(`click${EVENT_KEY}`,
                                    () => {
                                        update();
                                    });
                                $(e).find(Selector.BTN_DELETE).on(`click${EVENT_KEY}`,
                                    () => {
                                        delete_();
                                    });
                            }
                        });
                },
                convertData = (e) => {
                    calendarData.id = e.id;
                    calendarData.eventName = e.title;
                    calendarData.eventDescription = e.description;
                    calendarData.notifyType = e.notifyType;
                    calendarData.style = 1;
                    calendarData.backgroundColor = e.backgroundColor;
                    calendarData.borderColor = e.borderColor;
                    calendarData.textColor = e.textColor;
                    calendarData.startDate = e.startStr;
                    calendarData.endDate = e.endStr;
                    calendarData.allDay = e.allDay;
                    if (calendarData.backgroundColor) {
                        let backgroundColor = calendarData.backgroundColor.indexOf('#') == 0
                            ? HexToRgbStr(calendarData.backgroundColor)
                            : calendarData.backgroundColor;
                        $form.find(Selector.FORM_STYLE).next('span').find('div').each(function ()  {
                            if ($(this).css('background-color') === backgroundColor) {
                                calendarData.style = $(this).parent().prev().val();
                            }
                        });
                    }

                },
                popoverShow = (e) => {
                    popoverDestroy();
                    const startD = calendarData.allDay ? moment(calendarData.startDate).format("YYYY-MM-DD") : moment(calendarData.startDate).format("YYYY-MM-DD HH:mm"),
                        endD = !calendarData.endDate ? "" : calendarData.allDay ? moment(calendarData.endDate).format("YYYY-MM-DD") : moment(calendarData.endDate).format("YYYY-MM-DD HH:mm");
                    var opt = {
                        container: "body",
                        trigger: "manual",
                        boundary: "window",
                        placement: "auto",
                        dismiss: true,
                        html: true,
                        title: "日程概览",
                        content: `<div class="fw-bolder mb-2">${calendarData.eventName}</div>
                        <div class="fs-7"><span class="fw-bold">开始:</span>${startD}</div>
                        ${endD ? `<div class="fs-7"><span class="fw-bold">结束:</span>${endD}</div>` : ""}
                        <div  class="btn btn-sm btn-light-primary mt-3" id=${ClassName.BTN_MORE_VIEW} >查看更多</div>`
                    };
                    (popover = new KTApp.initBootstrapPopover(e, opt)).show();
                    popoverIsInit = true;
                    $(Selector.BTN_MORE_VIEW).on(`click${EVENT_KEY}`,
                        (e) => {
                            e.preventDefault();
                            popoverDestroy();
                            createViewModal();
                        });
                };

            return {
                init: function(option) {
                    option = option || {};
                    $modal = option.modal ? (typeof option.modal == "string" ? $('#' + option.modal) : $(option.modal)) : $(Selector.MODAL);
                    $form = $modal.find('form');

                    today = moment().startOf("day");
                    $(Selector.BTN_ADD).on(`click${EVENT_KEY}`,
                        () => {
                            add();
                        });
                    $form.find(Selector.FORM_ALL_DAY).on(`change${EVENT_KEY}`,
                        (e) => {
                            if (e.target.checked) {
                                $(Selector.TIME).closest('.flex-column').addClass('d-none');
                            } else {
                                $(Selector.TIME).closest('.flex-column').removeClass('d-none');
                            }
                        });

                    $fullCalendar = $(Selector.CALENDAR_BODY);
                    (fullCalendar = new FullCalendar.Calendar($fullCalendar[0],
                            {
                                locale: window.lang,
                                headerToolbar: {
                                    left: "prev,next today",
                                    center: "title",
                                    right: "dayGridMonth,timeGridWeek,timeGridDay"
                                },
                                initialDate: today.format("YYYY-MM-DD"),
                                navLinks: true,
                                selectable: true,
                                selectMirror: true,
                                editable: true,
                                initialView: 'dayGridMonth',
                                nowIndicator: true,
                                dayMaxEvents: true,
                                droppable: true,
                                select: function(e) {
                                    popoverDestroy();
                                    convertData(e);
                                    add();
                                },
                                //eventDropStop: function (info) {
                                //    console.log("drop", info);
                                //    var event = info.event;
                                //    //event.start = info.date;
                                //    //event.allDay = info.allDay;
                                //    change(event, function () { abp.notify.success("设置成功！");  }, function () { fullCalendar.addEvent(info.oldEvent); });
                                //},
                                eventClick: function(e) {
                                    popoverDestroy();
                                    convertData({
                                        id: e.event.id,
                                        title: e.event.title,
                                        description: e.event.extendedProps.description,
                                        notifyType: e.event.extendedProps.notifyType,
                                        backgroundColor: e.event.backgroundColor,
                                        borderColor: e.event.borderColor,
                                        textColor: e.event.textColor,
                                        startStr: e.event.startStr,
                                        endStr: e.event.endStr,
                                        allDay: e.event.allDay
                                    });
                                    createViewModal();
                                },
                                eventMouseEnter: function(e) {
                                    convertData({
                                        id: e.event.id,
                                        title: e.event.title,
                                        description: e.event.extendedProps.description,
                                        notifyType: e.event.extendedProps.notifyType,
                                        backgroundColor: e.event.backgroundColor,
                                        borderColor: e.event.borderColor,
                                        textColor: e.event.textColor,
                                        startStr: e.event.startStr,
                                        endStr: e.event.endStr,
                                        allDay: e.event.allDay
                                    });
                                    popoverShow(e.el);
                                },
                                eventChange: function (info) {
                                    if (_triggerChangeEvent) {
                                        console.log("Change", info);
                                        change(info.event, function () { abp.notify.success("操作成功！"); }, function () { fullCalendar.addEvent(info.oldEvent); });
                                    }
                                },
                                events:loadEvent
                                //[
                                //    {
                                //        id: "888",
                                //        title: "Reporting",
                                //        start: today.format("YYYY-MM") + "-13",
                                //        description: "xxx as ac vv bet gb tr rw nrn t",
                                //        //end: today.format("YYYY-MM") + "-14",
                                //        className: "fc-event-success",
                                //        allDay: true
                                //    }, {
                                //        id: "999",
                                //        title: "asd ff",
                                //        start: today.format("YYYY-MM") + "-14T14:00",
                                //        description: "xxx as ac vv bet gb tr rw nrn t",
                                //        end: today.format("YYYY-MM") + "-14T16:30",
                                //        className: "fc-event-success",
                                //        allDay: false
                                //    }
                                //]
                            }))
                        .render();

                }
            }
        }();

        $(function() {
            VbCalendar.init({
                modal: "modal"

            });
        });
    </script>
}