Javascript 如果结束日期大于开始日期，如何拆分记录_Javascript_Typescript

Javascript 如果结束日期大于开始日期，如何拆分记录

javascript typescript

Javascript 如果结束日期大于开始日期，如何拆分记录,javascript,typescript,Javascript,Typescript,我有一个日历事件列表，我允许用户在其中搜索事件，并将其显示在一个表中，如下所示 Search() { var json_arr = {}; this.List = new Array<EventModel>(); this.calendarEvents.forEach(event => { var calendarName = this.calendars.find(x => x.id === eve

我有一个日历事件列表，我允许用户在其中搜索事件，并将其显示在一个表中，如下所示

Search() {
        var json_arr = {};
        this.List = new Array<EventModel>();
        this.calendarEvents.forEach(event => {
            var calendarName = this.calendars.find(x => x.id === event.calendarId);
            json_arr[event.eventTitle + " - " + calendarName.title] = null;
                event.endTime = Moment(Moment(event.endTime).utc(true)).format("HH:mm A").toString();
            if (event.allDay == false) {
                var calenderEvent = new CalendarEventModel({
                    startDate: Moment(Moment(event.startDate).utc(true)).format("D MMMM,ddd").toString(),
                    startTime: Moment(Moment(event.startTime).utc(true)).format("HH:mm A").toString(),          
                    endTime: event.endTime,
                    eventTitle: event.eventTitle,
                    id: event.id,               
                });
            } else {
                var calenderEvent = new CalendarEventModel({
                    startDate: Moment(Moment(event.startDate).utc(true)).format("D MMMM,ddd").toString(),
                    allDay: event.allDay,
                    eventTitle: event.eventTitle,
                    id: event.id,
                });
            }
            this.List.push(calenderEvent);
        });
        
    }

StartDate       | Times                | title
16 January,Sat  | All Day              | test
14 January,Thu  | 13:00 PM to 14:00 PM | test2

以上方法很好

我的问题是，当一个事件的结束日期大于开始日期时，如何将一条记录拆分为两条或多条记录

这里是“事件”

在我告诉它如何显示日期之前是这样的

{eventTitle:""test2", startDate:"2021-01-14T13:00:00",endDate:"2021-01-17T07:00:00",startTime:"2021-01-14T13:00:00",endTime:"2021-01-17T07:00:00",allDay:false, id:"111125"}

正如你所看到的，开始日期是“2021-01-14，结束日期是2021-01-17，这意味着四天

如何拆分上面的1个事件以显示4条记录，但所有记录都必须具有相同的详细信息和id，以便表现在看起来像

 StartDate       | Times                | title   
  14 January,Thu  | 13:00 PM to 14:00 PM | test2
  15 January,Thu  | 13:00 PM to 14:00 PM | test2
  16 January,Thu  | 13:00 PM to 14:00 PM | test2
  17 January,Thu  | 13:00 PM to 14:00 PM | test2

我会得到两个日期之间的天数范围，然后每一天通过该范围，并为每一天创建一个新的日历事件

我认为moment没有内置的助手来获取两个日期之间的天数范围，这里有一种方法：

function dateRange(startDate, endDate) {
// number of days from startDate to endDate
    const diff = Moment(endDate).diff(Moment(startDate), 'days');
    const range = [];
// make an array of all dates from startDate to endDate
    range.push(Moment(startDate));
    for (i = 1; i <= diff; i++) {
        range.push(Moment(startDate).add(i, 'days'));
    }
    return range;
}

并使用

startDate

代替

event.startDate

为范围内的每一天创建一个新的日历事件，即：

const range = dateRange(event.startDate, event.endDate);
range.forEach(startDate => {
// your code except using startDate instead of event.startDate
    if (event.allDay == false) {
        var calenderEvent = new CalendarEventModel({
            startDate: Moment(Moment(startDate).utc(true)).format("D MMMM,ddd").toString(),
            startTime: Moment(Moment(event.startTime).utc(true)).format("HH:mm A").toString(),
            endTime: event.endTime,
            eventTitle: event.eventTitle,
            id: event.id,
        });
    } else {
        var calenderEvent = new CalendarEventModel({
            startDate: Moment(Moment(startDate).utc(true)).format("D MMMM,ddd").toString(),
            allDay: event.allDay,
            eventTitle: event.eventTitle,
            id: event.id,
        });
    }
});

我无法测试您的类方法，但我测试了根据日期跨度将事件分解为多个部分的单个逻辑。我在做以下几个假设

您使用ES6。如果没有，请将所有变量更改为var。我编辑的代码部分使用let和const

假设事件的时间跨度为1月14日至1月17日，1月15日和16日并非全天。在下面的代码修改中，我保持时间不变，假设事件在这段时间内每天的同一时间发生

修改后的代码：

Search() {
        var json_arr = {};
        this.List = new Array<EventModel>();
        this.calendarEvents.forEach(event => {
            var calendarName = this.calendars.find(x => x.id === event.calendarId);
            json_arr[event.eventTitle + " - " + calendarName.title] = null;
                event.endTime = Moment(Moment(event.endTime).utc(true)).format("HH:mm A").toString();
            if (event.allDay == false) {
                //Get the event specifics
                //I assume you are using ES6. If yes then please use let and const or change everything below to var.
                let eventStartDay = Moment(event.startDate).utc(true);
                const eventEndDay = Moment(event.endDate).utc(true);
                //Get the event span 
                let eventSpan = Moment.duration(eventEndDay.diff(eventStartDay)).as('days');
                if(eventSpan > 1) {
                    //Set to ceil for iteration purpose
                    eventSpan = Math.ceil(eventSpan);
                    //We are having for inside for that makes it O(n^2) excution speed so not a good design.
                    //I hope your events are not many.
                    [...Array(eventSpan).keys()].forEach(i => {
                        const calenderEvent = new CalendarEventModel({
                            startDate: eventStartDay.add(i, 'd').format("D MMMM,ddd").toString(),
                            startTime: Moment(Moment(event.startTime).utc(true)).format("HH:mm A").toString(),,          
                            endTime: event.endTime,
                            eventTitle: event.eventTitle,
                            id: event.id,               
                        });
                        this.List.push(calenderEvent);
                    })
                } else {
                    const calenderEvent = new CalendarEventModel({
                        startDate: Moment(Moment(event.startDate).utc(true)).format("D MMMM,ddd").toString(),
                        startTime: Moment(Moment(event.startTime).utc(true)).format("HH:mm A").toString(),          
                        endTime: event.endTime,
                        eventTitle: event.eventTitle,
                        id: event.id,               
                    });
                    this.List.push(calenderEvent);
                }
            } else {
                var calenderEvent = new CalendarEventModel({
                    startDate: Moment(Moment(event.startDate).utc(true)).format("D MMMM,ddd").toString(),
                    allDay: event.allDay,
                    eventTitle: event.eventTitle,
                    id: event.id,
                });
                this.List.push(calenderEvent);
            }
           
        });
        
    }

Search（）{
var json_arr={}；
this.List=新数组（）；
this.calendarEvents.forEach（事件=>{
var calendarName=this.calendars.find（x=>x.id==event.calendarId）；
json_arr[event.eventTitle+“-”+calendarName.title]=null；
event.endTime=矩（矩（矩（event.endTime）.utc（true））.format（“HH:mm A”）.toString（）；
如果（event.allDay==false）{
//了解活动详情
//我假设您正在使用ES6。如果是，请使用let和const或将下面的所有内容更改为var。
让eventStartDay=时刻（event.startDate）.utc（true）；
const eventEndDay=时刻（event.endDate）.utc（true）；
//获取事件跨度
设eventSpan=Moment.duration（eventEndDay.diff（eventStartDay））.as（'days'）；
如果（事件跨度>1）{
//为迭代目的设置为ceil
eventSpan=Math.ceil（eventSpan）；
//我们有一个内部的，因为这使得它的O（n^2）执行速度，所以不是一个好的设计。
//我希望你们的活动不多。
[…数组（eventSpan.keys（））.forEach（i=>{
const CalendarEvent=新的CalendarEventModel({
startDate:eventStartDay.add（i，'d'）.format（“d MMMM，ddd”）.toString（），
startTime:Moment（Moment（event.startTime）.utc（true））.format（“HH:mma”）.toString（），，
endTime:event.endTime，
eventTitle:event.eventTitle，
id:event.id，
});
此.List.push（压延事件）；
})
}否则{
const CalendarEvent=新的CalendarEventModel({
startDate:矩（矩（event.startDate）.utc（true））.format（“D MMMM，ddd”）.toString（），
startTime:Moment（Moment（event.startTime）.utc（true））.format（“HH:mm A”）.toString（），
endTime:event.endTime，
eventTitle:event.eventTitle，
id:event.id，
});
此.List.push（压延事件）；
}
}否则{
var CalendarEvent=新的CalendarEventModel({
startDate:矩（矩（event.startDate）.utc（true））.format（“D MMMM，ddd”）.toString（），
全天：事件。全天，
eventTitle:event.eventTitle，
id:event.id，
});
此.List.push（压延事件）；
}
});
}

哇，谢谢你，效果很好！

const range = dateRange(event.startDate, event.endDate);
range.forEach(startDate => {
// your code except using startDate instead of event.startDate
    if (event.allDay == false) {
        var calenderEvent = new CalendarEventModel({
            startDate: Moment(Moment(startDate).utc(true)).format("D MMMM,ddd").toString(),
            startTime: Moment(Moment(event.startTime).utc(true)).format("HH:mm A").toString(),
            endTime: event.endTime,
            eventTitle: event.eventTitle,
            id: event.id,
        });
    } else {
        var calenderEvent = new CalendarEventModel({
            startDate: Moment(Moment(startDate).utc(true)).format("D MMMM,ddd").toString(),
            allDay: event.allDay,
            eventTitle: event.eventTitle,
            id: event.id,
        });
    }
});

Search() {
        var json_arr = {};
        this.List = new Array<EventModel>();
        this.calendarEvents.forEach(event => {
            var calendarName = this.calendars.find(x => x.id === event.calendarId);
            json_arr[event.eventTitle + " - " + calendarName.title] = null;
                event.endTime = Moment(Moment(event.endTime).utc(true)).format("HH:mm A").toString();
            if (event.allDay == false) {
                //Get the event specifics
                //I assume you are using ES6. If yes then please use let and const or change everything below to var.
                let eventStartDay = Moment(event.startDate).utc(true);
                const eventEndDay = Moment(event.endDate).utc(true);
                //Get the event span 
                let eventSpan = Moment.duration(eventEndDay.diff(eventStartDay)).as('days');
                if(eventSpan > 1) {
                    //Set to ceil for iteration purpose
                    eventSpan = Math.ceil(eventSpan);
                    //We are having for inside for that makes it O(n^2) excution speed so not a good design.
                    //I hope your events are not many.
                    [...Array(eventSpan).keys()].forEach(i => {
                        const calenderEvent = new CalendarEventModel({
                            startDate: eventStartDay.add(i, 'd').format("D MMMM,ddd").toString(),
                            startTime: Moment(Moment(event.startTime).utc(true)).format("HH:mm A").toString(),,          
                            endTime: event.endTime,
                            eventTitle: event.eventTitle,
                            id: event.id,               
                        });
                        this.List.push(calenderEvent);
                    })
                } else {
                    const calenderEvent = new CalendarEventModel({
                        startDate: Moment(Moment(event.startDate).utc(true)).format("D MMMM,ddd").toString(),
                        startTime: Moment(Moment(event.startTime).utc(true)).format("HH:mm A").toString(),          
                        endTime: event.endTime,
                        eventTitle: event.eventTitle,
                        id: event.id,               
                    });
                    this.List.push(calenderEvent);
                }
            } else {
                var calenderEvent = new CalendarEventModel({
                    startDate: Moment(Moment(event.startDate).utc(true)).format("D MMMM,ddd").toString(),
                    allDay: event.allDay,
                    eventTitle: event.eventTitle,
                    id: event.id,
                });
                this.List.push(calenderEvent);
            }
           
        });
        
    }