We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change color of today's date column cell

Thread ID:

Created:

Updated:

Platform:

Replies:

151247 Feb 5,2020 05:52 AM UTC Apr 29,2020 01:00 PM UTC Angular - EJ 2 9
loading
Tags: Schedule
Rishabh Singh
Asked On February 5, 2020 05:52 AM UTC

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 [Syncfusion]
Replied On February 6, 2020 06:37 AM UTC

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. 


Regards, 
Vengatesh. 


Rishabh Singh
Replied On February 20, 2020 07:00 AM UTC

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 [Syncfusion]
Replied On February 20, 2020 11:18 AM UTC

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, 
 

Please let us know if you need any other assistance. 

Regards, 
Vengatesh 


Rishabh Singh
Replied On February 22, 2020 03:11 PM UTC

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 [Syncfusion]
Replied On February 24, 2020 05:21 AM UTC

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; 
  } 


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
Replied On April 8, 2020 11:20 AM UTC

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 [Syncfusion]
Replied On April 9, 2020 05:21 AM UTC

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. 
 
 
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
Replied On April 28, 2020 07:00 PM UTC

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.

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 [Syncfusion]
Replied On April 29, 2020 01:00 PM UTC

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> 


And for further reference kindly refer the below UG link, 

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

Regards, 
Hareesh 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon