Question

尝试如下所示将事件和资源呈现给Angular V6项目中的fullcalender-scheduler，但是当我遵循以下过程时，不会呈现事件。尝试在单击事件但未使用时打开角度材质对话框。任何人都可以帮我解决如何在click事件上打开对话框以及如何使用类中声明的属性来渲染事件，资源吗？员工：Employee []；客户：Customer [];

/**
 * Constructor
 * @param {MatDialog} _dialog
 * @param {EmployeeService} _employeeService
 * @param {ActivatedRoute} _route
 * @param {ToasterService} _toaster
 *
 */
constructor(
    public _dialog: MatDialog,
    public _employeeService: EmployeeService,
    public _toaster: ToasterService
) {}

// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------

/**
 * On init
 *
 */
ngOnInit() {
    this.getEmployee();
    this.getAppointments();
    this.schedule();
}

// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------

/**
 * get employee
 *
 */
getEmployee() {
    const employees = this._employeeService
        .getEmployees()
        .subscribe(res => {
            if (res instanceof UserDefinedError) {
            } else {
                this.employees = res;
                this.employees = _.forEach(this.employees, obj => {
                    obj.id = obj.emp_id;
                    obj.title = obj.m_emp_name;
                });
                console.log(this.employees);
            }
        });
}

/**
 * get customer
 *
 */
getCustomer() {}

/**
 * get appointment
 *
 */
getAppointments() {}
/**
 * set defaults for scheduler
 *
 */

schedule() {
    let scheduleEl;
    scheduleEl = document.getElementById('schedule');
    let schedule;
    schedule = new FullCalendar.Calendar(scheduleEl, {
        schedulerLicenseKey: schedulerLicenseKey,
        customButtons: {
            custom1: {
                text: 'New Booking',
                click: function() {
                    alert('new event');
                }
            }
        },
        header: {
            left: 'prev,next today custom1',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        select: function(start, end, event) {},
        eventClick: function(event, jsEvent, view) {
            this.openModal(); // not calling
        },
        groupByResource: true,
        slotDuration: '00:15:00',
        slotLabelInterval: '01:00',
        allDaySlot: false, // Turn off the All day slot
        nowIndicator: true,
        eventTextColor: 'white',
        defaultView: 'agendaDay',
        eventColor: '#9575CD',
        events: EVENTS,
        resources: this.employees // not working
    });
    schedule.render();
}

openModal() {
    // code to open modal
}`

在Angular 6项目中使用完整日历计划程序

0 个答案: