Change color of today's date column cell

[Rishabh Singh]

Hello, I am using Scheduler and currently, I am displaying all the events that are created in the schedule, I wanted to display today's date column in the different color and the slot count will be of 15 mins, I am attaching my calendar component with this query,
Thanks

Attachment: calendar_c994924e.zip

[Vengatesh Maniraj]

Hi Rishabh, 

Greetings from Syncfusion Support. 

Thanks for sharing the sample. We could change the today’s date column’s color by making use of renderCell event and also could be possible to provide the 15min slot by making use of  timesScale property like below, 

 <ejs-schedule #scheduleObj height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" (renderCell)="OnRenderCell($event)" [timeScale]="timeScale"> 

        </ejs-schedule> 

 public timeScale: TimeScaleModel = { enable: true, interval: 60, slotCount: 4 }; 

For your reference we have prepared the below sample. Kindly check the sample and revert us for further assistance. 

Sample: https://stackblitz.com/edit/angular-h8wbws?file=app.component.html 

Regards, 

Vengatesh. 

[Rishabh Singh]

Hello, Thanks for the response, It is working perfectly fine, I just want to ask one small thing, If I have to disable the pass cells, that is been past by time also(for example, If the current time is 1 pm then all the cell before 1 pm of today's date and previous dates will be disabled). How can I implement these things in the component?

[Vengatesh Maniraj]

Hi Rishabh, 

 

Thanks for the update. 

 

We are happy that our solution has fulfilled your previous requirement. 

 

Based on the latest query, we have prepared the sample to disable the past date and time from the current time. Please check the below sample, 

 

Sample: https://stackblitz.com/edit/disable-past-date-and-time?file=app.component.ts 

Please let us know if you need any other assistance. 

Regards, 

Vengatesh 

[Rishabh Singh]

Thanks, Vengatesh for your solution, The component dragging is working perfectly and cells are also disabled, Thanks for your help but when I 

I tried to implement it to my component, here are some issues that I am facing.

1) When clicking on the past date or time cells, the modal is still open on double click, I don't want any double click in my project, it should be completely disabled, I want to open the modal on a single click on the upcoming time cells.

2) the next thing is, I am not able to drag the event after 2 hours it is kind of disabled, its name is "Quality analysis".

I am attaching my component with this project, please let me know where I am doing wrong, the suggestion is appreciated,

Attachment: calendar_27db21b6.zip

[Vengatesh Maniraj]

Hi Rishabh, 

Thanks for the update. 

Q1: In your shared code, the modal is not open when we double click on the cell and based on your requirement, we could be disable the popup open from double click action by making call of cellDoubleClick event like below, 

 (cellDoubleClick)="onCellDoubleClick($event)" (resizeStop)="onResizeStop($event)" cssClass="schedule-date-header-template" 

onCellDoubleClick(args: CellClickEventArgs) { 

    console.log("cell click called"); 

    args.cancel = true; 

  } 

API: https://ej2.syncfusion.com/react/documentation/api/schedule/#celldoubleclick  

Sample: https://stackblitz.com/edit/disable-past-date-and-time-xuib2n?file=data.ts

Q2: We could not drag that event names as “Quality analysis” because it is a read only event. By setting true for IsReadonly property, we could perform it like normal events. 

    Id: 5, 

    Subject: "Quality Analysis", 

    StartTime: new Date(currentTime + msPerHour * 1), 

    EndTime: new Date(currentTime + msPerHour * 3), 

    IsReadonly: true 

  }, 

Please let us know if you need any other assistance. 

Regards, 

Vengatesh. 

[Rishabh Singh]

Hello sir, I am trying on open a modal on the non-disable cell means the future date cells, I disabled the past date cells and it is working fine, but when I am trying to open modal in the future cell it is not opening, and popupOpen function is not getting called also, Can you help me figure out this.

Thanks

Attachment: calendar_2694c72.zip

[Vengatesh Maniraj]

Hi Rishabh, 

 

Thanks for the update. 

 

We have validated your shared files and checked the reported issue but it could be working properly at our end. For your reference, we have prepared the sample with your shared codes and video demo for it which are available in the below link. 

 

Sample: https://stackblitz.com/edit/angular-ge6sar-5ztqwh?file=app.component.ts 

Video demo: https://www.syncfusion.com/downloads/support/forum/151247/ze/VIDEO_~11860883215  

 

Kindly check the above sample and vide demo and if we misunderstood your reported issue please share more details about your issue like video demo/image. 

 

Regards, 

Vengatesh   

  

[Rishabh Singh]

Hello sir, 
I am trying to open a personalized modal on the cell clicked which have some fields, 

<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">

<p>Content onep>

<p>Content twop>

<p>Content threep>

<p>Content threep>

nz-modal>

This is the modal I am trying added in HTML file, and the methods are in component file,

What I want to achieve is to open this customized modal on the cell clicked and on the event editor window.

This is modal look like

and I want to call the edit and delete appointment method from HTML file on a button clicked, How can I achieve this effect Because I have to pass some ID

to the edit and delete method that will be used in my customized modal.

also I have to call that edit method also on Drag and drop

I added comments on my attaching components also for better understanding.

Regards

Rishabh Singh

Attachment: calendar_2ebdd362.zip

[Hareesh Balasubramanian]

Hi Rishabh, 

Thanks for the update. 

We have validated your reported query “I am trying to open a personalized modal on the cell clicked which have some fields” at our end. We found that in your shared code snippet you have bind wrong ng-template and for that, we have prepared a sample with the custom widow for the scheduler using editorTemplate property. And the sample can be viewed from the following link. 

Code snippet: 

    <ng-template #editorTemplate let-data> 

      <table *ngIf="data != undefined" class="custom-event-editor" width="100%" cellpadding="5"> 

        <tbody> 

          <tr> 

            <td class="e-textlabel">Summary</td> 

            <td colspan="4"> 

              <input id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" 

                                name="Subject" style="width: 100%" /> 

                        </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">Status</td> 

            <td colspan="4"> 

              <ejs-dropdownlist id='Status' class="e-field" data-name="Status" placeholder='Choose Status' 

                [dataSource]='StatusData' [fields]='statusFields' value='{{data.Status}}'> 

              </ejs-dropdownlist> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">From</td> 

            <td colspan="4"> 

              <ejs-datetimepicker id="StartTime" class="e-field" data-name="StartTime" 

                format="M/dd/yy h:mm a" (change)="onDateChange($event)" 

                [value]="startDateParser(data.startTime || data.StartTime)"></ejs-datetimepicker> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">To</td> 

            <td colspan="4"> 

              <ejs-datetimepicker id="EndTime" class="e-field" data-name="EndTime" format="M/dd/yy h:mm a" 

                (change)="onDateChange($event)" [value]='endDateParser(data.endTime || data.EndTime)'> 

              </ejs-datetimepicker> 

            </td> 

          </tr> 

          <tr> 

            <td class="e-textlabel">Reason</td> 

            <td colspan="4"> 

              <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" 

                                value="{{data.Description}}" 

                                style="width: 100%; height: 60px !important; resize: vertical"></textarea> 

            </td> 

          </tr> 

        </tbody> 

      </table> 

    </ng-template> 

Sample: https://stackblitz.com/edit/angular-mzlwju?file=app.component.html 

And for further reference kindly refer the below UG link, 

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-event-editor-using-template 

Kindly try the above solution and revert us if you have any further assistance. 

Regards, 

Hareesh