我可以在 FullCalendar 中将结束日期设置为仅一个单元格的特定结束日期吗?

如何解决我可以在 FullCalendar 中将结束日期设置为仅一个单元格的特定结束日期吗?

在 FullCalendarJS 中,我们都知道有一个很长的事件会在日历中显示一个扩展的水平条。我想要做的是仅在 1 个单元格中显示开始日期以及结束日期。我已经可以做开始日期,但结束日期不能移动到它想要的单元格/日期。例如,请截图如下:

enter image description here

开始日期为 2021 年 3 月 26 日,而结束日期应为 2021 年 3 月 30 日。

这是我的打字稿代码:

import { Component,OnInit,ElementRef,Input,Output,EventEmitter,AfterViewInit } from '@angular/core';
import { Calendar } from '@fullcalendar/core';
import { CalendarService } from '@services/calendar.service';
import { CALENDAR_FILTERS } from '@shared/constants';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import moment from 'moment';

const MINI = 'mini-calendar';
const FULL = 'full-calendar';

@Component({
  selector: 'app-calendar',templateUrl: './calendar.component.html',styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent implements OnInit,AfterViewInit {

    calendarFilters: any;
    calendar: Calendar;
    isLoading: boolean;

    @Input() eventSource: (startDate: any,endDate: any,callback: any,filters: any) => any;
    @Input() withFilters: boolean;
    @Input() appearance: string;
    @Output() onDateClick = new EventEmitter();
    @Output() onEventClick = new EventEmitter();

    constructor(private elementRef: ElementRef,private calendarService: CalendarService) {}

    ngOnInit(): void {}

    ngAfterViewInit() {
        if (this.withFilters) {
            this.calendarService.fetchCalendarFilters().subscribe((res) => {
                this.calendarFilters = res.calendar_filter
                    ? JSON.parse(res.calendar_filter.config)
                    : CALENDAR_FILTERS.slice(0);
                this.initializeCalendar();
                this.addCalendarFiltersSection();
            });

            return;
        }

        this.initializeCalendar();
    }

    initializeCalendar() {
        let calendarEl = document.getElementById('common-calendar');
        this.calendar = new Calendar(calendarEl,{
            plugins: [dayGridPlugin,interactionPlugin],header: {
                left: this.appearance == MINI ? 'title' : '',center: this.appearance == MINI ? '' : 'title',right: 'prev,today,next'
            },eventSources: [this.fetchEvents.bind(this)],dateClick: this.dateClick.bind(this),eventClick: this.eventClick.bind(this),displayEventEnd: true,eventTimeFormat: { 
                hour: 'numeric',minute: '2-digit',meridiem: 'short'
            },eventRender: function(info) {
                let el = info.el;
                let data = info.event;
                el.childNodes[0].remove();

                let title = document.createElement("p");
                var bold = document.createElement("strong");
                title.appendChild(document.createTextNode(data.title));
                title.classList.add("cstm-fc-title");
                el.appendChild(title);  

                let time = document.createElement("p");
                let start = moment(data.start).format('hh:mm A');
                let end = moment(data.end).add(1,'days').format('hh:mm A');
                time.appendChild(document.createTextNode(start.concat(' - ',end)));
                time.classList.add("cstm-fc-time");
                el.appendChild(time);   
            },eventPositioned: function(info) {
                let el = info.el;
                if (info.event.extendedProps.event_type === 'placed') {
                    el.parentElement.removeAttribute("colspan");
                    el.parentElement.setAttribute("colspan","1");
                } 
            }
        });
        this.calendar.render();
    }


    refetchEvents() {
        this.calendar.refetchEvents();
    }

    fetchEvents(info,successCallback,failureCallback) {
        this.eventSource(info.startStr,info.endStr,this.calendarFilters);
    }

    dateClick(info) {
        this.onDateClick.emit(info)
    }

    eventClick(info) {
        this.onEventClick.emit(info);
    }

    onCalendarFilterClick(event) {
        this.isLoading = true;
        const calendar_event = event.target.id;

        this.calendarFilters.includes(calendar_event)
            ? this.calendarFilters.splice(this.calendarFilters.indexOf(calendar_event),1)
            : this.calendarFilters.push(calendar_event);

        this.calendarService.setCalendarFilters({ config: this.calendarFilters }).subscribe(calendar => {
            this.isLoading = false;
        });
        this.generateButtonEventFilters(this.calendarFilters);
        this.calendar.refetchEvents();
    }

    setLoader(value) {
        this.isLoading = value;
    }

    private addCalendarFiltersSection() {
        var el = this.elementRef.nativeElement.querySelector('.fc-view-container');
        let html = '<div class="btn-group-events" id="custom-buttons"></div>';

        el.insertAdjacentHTML('beforebegin',html);
        this.generateButtonEventFilters(this.calendarFilters);
    }

    private generateButtonEventFilters(calendarFilters) {
        let buttons = '';

        CALENDAR_FILTERS.forEach(function (event,index) {
            buttons += `<button type="button" id="${event}" class="${
                calendarFilters.includes(event) ? 'btn-event' : 'btn-event btn-event-active'
            }">
        ${event.charAt(0).toUpperCase() + event.substring(1)}</button>`;
        });

        document.getElementById('custom-buttons').innerHTML = buttons;
        this.addHandlers();
    }

    private addHandlers() {
        CALENDAR_FILTERS.forEach((calendar_event) => {
            this.elementRef.nativeElement.querySelector(`#${calendar_event}`).addEventListener('click',(event) => {
                this.onCalendarFilterClick(event);
            });
        });
    }
}

非常感谢任何建议。

解决方法

所以我已经解决了这个问题,我的解决方法是使用 VanillaJS 和一些 FullCalendar 的 event 回调来操作 endDate。

这是最后的样子:

enter image description here

我已经使用了 eventRendereventPositioned 回调,然后在控制台上检查了返回的 info 对象。从那里,我结合一些 Vanilla JS 操纵它。

eventRender: function(info) {
        let el = info.el;
        let data = info.event;
        el.childNodes[0].remove();

        let title = document.createElement("p");
        title.appendChild(document.createTextNode(data.title));
        title.classList.add("cstm-fc-title");
        el.appendChild(title);

        let time = document.createElement("p");
        let start = moment(data.start).format('hh:mm A');
        let end = moment(data.end).add(1,'days').format('hh:mm A');
        time.appendChild(document.createTextNode(start.concat(' - ',end)));
        time.classList.add("cstm-fc-time");
        el.appendChild(time);
    },eventPositioned: function(info) {
        let el = info.el;
        let parent = el.parentElement;
        if (info.event.extendedProps.event_type === 'placed') {
            if (el.classList.contains("fc-start")) {
                parent.removeAttribute("colspan");
                parent.setAttribute("colspan","1");
            }
            if (el.classList.contains("fc-end")) {
                let columnNumber = parseInt(parent.getAttribute("colspan")) + 1;
                let endDateColumn = parent.parentElement.querySelector("td:nth-child(" + columnNumber + ")");
                parent.classList.remove("fc-event-container");
                parent.removeAttribute("class");
                parent.removeAttribute("colspan");
                parent.childNodes.forEach(function(item) {
                    let clone = item.cloneNode(true);
                    endDateColumn.appendChild(clone);
                    endDateColumn.classList.add("fc-event-container");
                    endDateColumn.setAttribute("colspan","1");
                    el.remove();
                });
            }
        }
    }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?