Improve ageanda calendar

2026-04-19 21:06:06 +00:00 · 2021-06-17 16:13:37 +01:00
parent 7c7a6f8483
commit d82d1446ce
4 changed files with 146 additions and 279 deletions
@@ -226,7 +226,8 @@
                  <div *ngFor="let event of events.value" >
                    

-                    <div class="d-flex content-{{event.profile}}-{{event.event.CalendarName}} mt-10 cursor-pointer width-100 " (click)="eventClicked(event)" >
+                    <div class="d-flex content-{{event.profile}}-{{event.event.CalendarName}} mt-10 cursor-pointer width-100 " (click)="eventClicked(event)" 
+                    *ngIf="viewEventMonth <= dateMonth(event)">
                      <div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">

                        <div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
@@ -258,18 +259,17 @@
              </div>
            </div>

-            <div  class="fs-timeline flex-grow-1 d-none d-md-block  d-md-block text-black  pr-20 width-100 height-100 overflow-y-auto" *ngIf="loggeduser.Profile == 'MDGPR'">
+            <div  class="fs-timeline flex-grow-1 d-none d-md-block d-md-block text-black  pr-20 width-100 height-100 overflow-y-auto" *ngIf="loggeduser.Profile == 'MDGPR'">
              <div *ngFor="let events of TimelineMDList | keyvalue;" >
                
-                <div *ngIf="CalendarCurrentDay <= events.key">
-                  <div class="day mt-10">
+                <div class="EventListBox-container" >
+                  <div class="day EventListBox-day mt-10">
                    {{ TimelineDayEvent(events.key)}}
                  </div>
-  
-                  <div *ngFor="let event of events.value" >
-  
-                    <div class="d-flex content-mdgpr-{{event.event.CalendarName}} mt-10 cursor-pointer" (click)="eventClicked(event)">
-                      
+                  <div *ngFor="let event of events.value" class="EventListBox" >
+                    <div class="d-flex content-mdgpr-{{event.event.CalendarName}} mt-10 cursor-pointer" (click)="eventClicked(event)"
+                      *ngIf="viewEventMonth <= dateMonth(event)">
+                  
                      <div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
                        <div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
                        <div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
@@ -292,7 +292,6 @@
                        </div>
                      </div>
                    </div>
-  
                  </div>
                </div>

@@ -310,7 +309,9 @@

                  <div *ngFor="let event of events.value" >

-                    <div class="d-flex content-pr-{{event.event.CalendarName}} mt-10 cursor-pointer" (click)="eventClicked(event)">
+                    <div class="d-flex content-pr-{{event.event.CalendarName}} mt-10 cursor-pointer" (click)="eventClicked(event)".
+                    *ngIf="viewEventMonth <= dateMonth(event)">
+                    
                      <div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
                        <div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
                        <div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
@@ -7,19 +7,6 @@
  display: table-cell;
 }
 
-ion-slide{
-  td{
-    div {
-      padding-left: 7px;
-      border-radius: 28px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      height: 25px;
-    }
-  }
-}

 :host ::ng-deep {
  .monthview-primary-with-event {
@@ -202,12 +202,10 @@ export class AgendaPage implements OnInit {
  //Go to the next view of the calendar month/week/day
  next() {
    this.myCal.slideNext();
-    this.centralizeTimeline(500);
  }
  //Go to the previous view of the calendar
  back(){
    this.myCal.slidePrev();
-    this.centralizeTimeline(500);
  }
  //Shows the title of your view
  onViewTitleChanged(title){
@@ -263,8 +261,6 @@ export class AgendaPage implements OnInit {
    // calendar change date
    this.eventSelectedDate = new Date(ev);

-    /* this.centralizeTimeline(500);
-    this.timelineBoxCorrectHeight(500); */
  };

  // changedate
@@ -287,7 +283,7 @@ export class AgendaPage implements OnInit {
  }

  // for calendar
-  currentDayEventDisplayBorder(day: any, id: any){
+  currentDayEventDisplayBorder(day: any, id: any) {
    
    const events = day[id].events;

@@ -315,32 +311,7 @@ export class AgendaPage implements OnInit {
  }

  // for timeline
-  centralizeTimeline(timeout: number) {
-    // auto scroll timeline

-    if(!this.showLoader) {
-      setTimeout(() => {
-        const timelineMarker = document.querySelector('.cal-current-time-marker');
-        const scrollContainer = document.querySelector('.timeline-wrapper');
-        
-        try {
-          scrollContainer.scroll({
-            top: parseInt(timelineMarker['style']['top'].replace('px',''))  - ((scrollContainer['offsetHeight']/2) - 60),
-            left: 0, 
-            behavior: 'smooth' 
-          })
-        } catch (error) {
-          //
-          if(!this.showLoader) {
-             //this.selectFirstEventOfTheDay();
-          }
-          
-        }
-  
-      }, timeout);
-    }
-
-  }

  get CalendarCurrentDay ():any {

@@ -392,75 +363,6 @@ export class AgendaPage implements OnInit {
    `
  }

-  // for timeline
-  timelineBoxCorrectHeight(timeout){
-
-    setTimeout(()=>{
-
-      if(window.innerWidth <= 1024){
-        this.events.forEach((el:any, eventIndex)=>{ 
-        
-          const startEvent =  new Date(el.startTime| el.start);
-          const endEvent = new Date(el.endTime | el.end);
-  
-          var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
-          // const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
-          
-          document.querySelectorAll('.ss-timeline .timeline-box').forEach(ele => {
-            
-            if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
-  
-              ele.setAttribute('style',`height:${minutes}px`);
-  
-            }
-  
-          });
-  
-        });
-      } else {
-        this.TimelineMD.forEach((el:any, eventIndex)=>{ 
-        
-          const startEvent =  new Date(el.startTime| el.start);
-          const endEvent = new Date(el.endTime | el.end);
-  
-          var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
-          // const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
-          
-          document.querySelectorAll('.fs-timeline .timeline-box').forEach(ele => {
-            
-            if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
-  
-              ele.setAttribute('style',`height:${minutes}px`);
-  
-            }
-  
-          });
-  
-        });
-      }
-
-
-    },timeout)
-
-    setTimeout(()=>{
-      this.TimelinePR.forEach((el, eventIndex)=>{ 
-
-        const startEvent =  new Date(el['startTime']);
-        const endEvent = new Date(el['endTime']);
-
-        var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
-        const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
-        
-        document.querySelectorAll('.sd-timeline .timeline-box').forEach(ele => {
-          
-          if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
-            ele.setAttribute('style',`height:${minutes}px`);
-          }
-        });
-
-      });
-    },timeout)
-  }

  // for timeline
  timelineFilter(calendarName, eventsList, profile){
@@ -571,8 +473,6 @@ export class AgendaPage implements OnInit {
                this.showTimeline = true;
                
  
-                this.timelineBoxCorrectHeight(500);
-                this.centralizeTimeline(500);
            });
      
          }
@@ -615,8 +515,6 @@ export class AgendaPage implements OnInit {
                this.showLoader = false;
                this.showTimeline = true;
  
-                this.timelineBoxCorrectHeight(500);
-                this.centralizeTimeline(500);
               
  
              });
@@ -661,8 +559,6 @@ export class AgendaPage implements OnInit {
                this.showLoader = false;
                this.showTimeline = true;
  
-                this.timelineBoxCorrectHeight(500);
-                this.centralizeTimeline(500);
               
  
              });
@@ -708,8 +604,6 @@ export class AgendaPage implements OnInit {

              this.showLoader = false;
              this.showTimeline = true;
-              this.timelineBoxCorrectHeight(500);
-              this.centralizeTimeline(500);
            });
  
          }
@@ -745,8 +639,6 @@ export class AgendaPage implements OnInit {
              this.showLoader = false;
              this.showTimeline = true;

-              this.timelineBoxCorrectHeight(500);
-              this.centralizeTimeline(500);
            });
          }
          break;
@@ -787,8 +679,6 @@ export class AgendaPage implements OnInit {
                this.showLoader = false;
                this.showTimeline = true;
  
-                this.timelineBoxCorrectHeight(500);
-                this.centralizeTimeline(500);
              });
          } else {
            this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).then((res:any) => {
@@ -821,8 +711,6 @@ export class AgendaPage implements OnInit {
              this.showLoader = false;
              this.showTimeline = true;

-              this.timelineBoxCorrectHeight(500);
-              this.centralizeTimeline(500);
            });
          }
          break;
@@ -884,8 +772,6 @@ export class AgendaPage implements OnInit {
            counter++;
            if(counter==2){
              this.showLoader = false;
-              this.timelineBoxCorrectHeight(500);
-              this.centralizeTimeline(500);
            }
           
       });
@@ -933,8 +819,6 @@ export class AgendaPage implements OnInit {

        if(counter==2 || this.loggeduser.Profile == 'PR') {
          this.showLoader = false;
-          this.timelineBoxCorrectHeight(500);
-          this.centralizeTimeline(500);
        }

    });
@@ -989,8 +873,6 @@ export class AgendaPage implements OnInit {

          if(counter==2 || this.loggeduser.Profile == 'PR') {
            this.showLoader = false;
-            this.timelineBoxCorrectHeight(500);
-            this.centralizeTimeline(500);
          }

      });
@@ -1005,151 +887,162 @@ export class AgendaPage implements OnInit {

    list.forEach( (event:any)=> {

-      var startDate = new Date(event.start);
-      var endDate = new Date(event.end);
+      var startDate: any = new Date(event.start);
+      var endDate: any = new Date(event.end);

      const day =   (((new Date (event.start)).getDate())).toString().padStart(2,'0')
      
      event.manyDays = false

-      if ( (new Date (this.viewDate).getMonth()) == (new Date(event.start).getMonth()) ) {

-        if(!days.hasOwnProperty(day)) {
-          days[day] = []
-        }
+      if(!days.hasOwnProperty(day)) {
+        days[day] = []
+      }

-        var Difference_In_Days =  endDate.getDate()  -  startDate.getDate() 
+      // difference
+      const diffTime = Math.abs(endDate - startDate);
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 

-        if ( endDate.getTime() >  startDate.getTime() && Difference_In_Days <= 50 && !event.event.IsAllDayEvent  ) {
-          if (Difference_In_Days >= 1) {
-            
-            const StartEvent =  Object.assign({}, {
-              title: event.title,
-              start: event.start,
-              end: event.end,
-              color: event.color,
-              id: event.id,
-              index: event.index,
-              profile: event.profile,
-              CalendarName: event.CalendarName,
-              event: {
-                Subject: event.event.Subject,
-                StartDate:  event.event.StartDate,
-                EndDate: event.event.EndDate,
-                Location:  event.event.Location,
-                EventId:  event.event.EventId,
-                CalendarName: event.event.CalendarName
-              },
-              startMany: true,
-              endMany: false,
-              middle: false
-            })
-            
-            days[day].push(StartEvent)
-            
-    
-            let i = 1;
-            
-            while (startDate.getFullYear() !=  endDate.getFullYear() || 
-                  startDate.getMonth() != endDate.getMonth() ||
-                  startDate.getDate() != endDate.getDate()) {
+      if (diffDays <= 150 && !event.event.IsAllDayEvent  ) {

-              const newDate = startDate.setDate(startDate.getDate()+ i)
+        if (diffDays >= 1) {
+          
+          const StartEvent =  Object.assign({}, {
+            title: event.title,
+            start: event.start,
+            end: event.end,
+            color: event.color,
+            id: event.id,
+            index: event.index,
+            profile: event.profile,
+            CalendarName: event.CalendarName,
+            event: {
+              Subject: event.event.Subject,
+              StartDate:  event.event.StartDate,
+              EndDate: event.event.EndDate,
+              Location:  event.event.Location,
+              EventId:  event.event.EventId,
+              CalendarName: event.event.CalendarName
+            },
+            startMany: true,
+            endMany: false,
+            middle: false
+          })
+          
+          days[day].push(StartEvent)
+          
+          let i = 1;
+          
+          while (startDate.getFullYear() !=  endDate.getFullYear() || 
+            startDate.getMonth() != endDate.getMonth() ||
+            startDate.getDate() != endDate.getDate()) {

-              let otherDays =   (((new Date (newDate)).getDate())).toString().padStart(2,'0')
-                
+            const newDate = startDate.setDate(startDate.getDate()+ i)

-              event.other = true
+            let otherDays =   (((new Date (newDate)).getDate())).toString().padStart(2,'0')
              
-              event.start = newDate
-              if(!days.hasOwnProperty(otherDays)) {
+            event.other = true
+            
+            event.start = newDate
+            if(!days.hasOwnProperty(otherDays)) {


-                days[otherDays] = []
-              }
-              
-
-              if (!(startDate.getFullYear() !=  endDate.getFullYear() || 
-              startDate.getMonth() != endDate.getMonth() ||
-              startDate.getDate() != endDate.getDate())) {
-                // last push
-
-                const EndEvent =  Object.assign({}, {
-                  title: event.title,
-                  start: event.start,
-                  end: event.end,
-                  color: event.color,
-                  id: event.id,
-                  index: event.index,
-                  profile: event.profile,
-                  CalendarName: event.CalendarName,
-                  event: {
-                    Subject: event.event.Subject,
-                    StartDate:  event.event.StartDate,
-                    EndDate: event.event.EndDate,
-                    Location:  event.event.Location,
-                    EventId:  event.event.EventId,
-                    CalendarName: event.event.CalendarName
-                  },
-                  Subject: event.Subject,
-                  startMany: false,
-                  endMany: true,
-                  middle: false
-                })
-
-                days[otherDays].push(EndEvent)
-
-              } else {
-                const EndEvent =  Object.assign({}, {
-                  title: event.title,
-                  start: event.start,
-                  end: event.end,
-                  color: event.color,
-                  id: event.id,
-                  index: event.index,
-                  profile: event.profile,
-                  CalendarName: event.CalendarName,
-                  event: {
-                    Subject: event.event.Subject,
-                    StartDate:  event.event.StartDate,
-                    EndDate: event.event.EndDate,
-                    Location:  event.event.Location,
-                    EventId:  event.event.EventId,
-                    CalendarName: event.event.CalendarName
-                  },
-                  Subject: event.Subject,
-                  startMany: false,
-                  endMany: true,
-                  middle: true
-                })
-                days[otherDays].push(EndEvent)
-              }
-              
-
+              days[otherDays] = []
            }
+            
+            if (!(startDate.getFullYear() !=  endDate.getFullYear() || 
+            startDate.getMonth() != endDate.getMonth() ||
+            startDate.getDate() != endDate.getDate())) {
+              // last push

-          } else {
-            days[day].push(event)
+              const EndEvent =  Object.assign({}, {
+                title: event.title,
+                start: event.start,
+                end: event.end,
+                color: event.color,
+                id: event.id,
+                index: event.index,
+                profile: event.profile,
+                CalendarName: event.CalendarName,
+                event: {
+                  Subject: event.event.Subject,
+                  StartDate:  event.event.StartDate,
+                  EndDate: event.event.EndDate,
+                  Location:  event.event.Location,
+                  EventId:  event.event.EventId,
+                  CalendarName: event.event.CalendarName
+                },
+                Subject: event.Subject,
+                startMany: false,
+                endMany: true,
+                middle: false
+              })

+              days[otherDays].push(EndEvent)
+
+            } else {
+              const EndEvent =  Object.assign({}, {
+                title: event.title,
+                start: event.start,
+                end: event.end,
+                color: event.color,
+                id: event.id,
+                index: event.index,
+                profile: event.profile,
+                CalendarName: event.CalendarName,
+                event: {
+                  Subject: event.event.Subject,
+                  StartDate:  event.event.StartDate,
+                  EndDate: event.event.EndDate,
+                  Location:  event.event.Location,
+                  EventId:  event.event.EventId,
+                  CalendarName: event.event.CalendarName
+                },
+                Subject: event.Subject,
+                startMany: false,
+                endMany: true,
+                middle: true
+              })
+              days[otherDays].push(EndEvent)
+            }
+            
          }
+
        } else {
          days[day].push(event)

        }
+      } else {
+        days[day].push(event)

      }
-     
+
    })
+
+    setTimeout(()=>{
+      document.querySelectorAll('.EventListBox-container .EventListBox').forEach((e)=>{
+        if(e.childElementCount == 0) {
+          console.log(e.childElementCount)
+          e.parentElement.style.display = 'none'
+        } else {
+          e.parentElement.style.display = 'block'
+        }
+      })
+    }, 10)
    
    return days
  }

-  eventListVisible(event) {
-    return momentG(event,'MMMM yyyy')  ==  momentG(this.calendar.currentDate, 'MMMM yyyy')
+  get viewEventMonth () {
+    return  this.viewDate.getMonth()
  }

-  log(event) {
-    console.log(event)
+  dateMonth(event: any) {
+    return  new Date(event.start).getMonth()
+  }
+
+  eventListVisible(event) {
+    return momentG(event,'MMMM yyyy')  ==  momentG(this.calendar.currentDate, 'MMMM yyyy')
  }

  // for timeline select the first event in the timeline
@@ -1157,7 +1050,6 @@ export class AgendaPage implements OnInit {
    
    setTimeout(()=>{
      
-
      let sortedDate = this.eventSource.sort((a,b) =>{
        return (b.startTime) -(a.startTime);
      });
@@ -1213,9 +1105,6 @@ export class AgendaPage implements OnInit {
      this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
    }

-    // change header profile picture
-    // window['header'](this.profile);
-
  }

  async openAddEvent() {