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. Image for the cookie policy date
close icon

Customized scheduler

Hi,

     I would like to create a customized scheduler. My requirement is "User should select a period of date and time from the calendar and selected period should be blocked until the booking got over". Add, edit option should be completely disabled.It is like booking some room by user. Booking should be confirmed by some external button. Can you help me out

10 Replies

DD Dinesh D November 5, 2019 06:24 AM UTC

Hi,

Can you please reply me ASAP



VD Vinitha Devi Murugan Syncfusion Team November 5, 2019 02:01 PM UTC

Hi Dinesh, 
 
Syncfusion Greetings. 
 
We suspect that your requirement is to prevent the scheduler's CRUD operation until booking is made for the selected date and time period. We suggest you avoid closing the event window until the booking is over for this requirement. 
 
 
In the above sample, when a save button is clicked without value in Title field, editor will not close and alert will be displayed.  
 
 
  actionBegin: function(args) { 
    if ( args.requestType == "eventCreate"  && args.data[0].Subject === "Add title" && !ej.base.isNullOrUndefined(document.querySelector('.e-schedule-dialog'))) { 
        // To prevent crud action. 
        args.cancel = true; 
        // To prevent window close 
        this.uiStateValues.isBlock = true; 
        alert("Enter Title"); 
      } 
    }, 
    actionComplete:function(args){  
    if (!ej.base.isNullOrUndefined(document.querySelector('.e-schedule-dialog'))) {  
      // Close event window  
      this.uiStateValues.isBlock = false;  
    } 
    }  
 
 
Regards, 
M.Vinitha devi. 



DD Dinesh D November 6, 2019 05:22 AM UTC

Hi Vinitha,

I think I didn't explain clearly. My requirement is

1. User1 need to book one room in a particular date and time. for example i need to book on Nov 10 2019 10:00 pm to 11:00 pm. So the particular date and time should be blocked for that user1 only. CRUD operation after booking the room should be completely disabled. Because if another user came to book the room for same date and time it sholud show it is already booked by User1.

2. While booking Subject, From and To is enough.. i don't want other options.

3. And in top right corner i need only Month,day and week view.. Other views should be removed.

And one more thing, May i know Which function(function name) is called when I hit save button


Can you please take this as priority issue and help me out.


BS Balasubramanian Sattanathan Syncfusion Team November 7, 2019 07:58 PM UTC

Hi Dinesh, 
Thanks for your valuable patience.
 
Q1: We have achieve your requirement using below sample.
 
Q2: We can remove editor window fields using below css. 
.e-schedule-dialog .e-location-container,
.e-schedule-dialog .e-all-day-time-zone-row,
.e-schedule-dialog .e-control.e-recurrenceeditor.e-lib,
.e-schedule-dialog .e-description-row {
  display: none !important;
}
Q3: We can add views like below code
 
<e-views>
      <e-view option="Month"></e-view>
      <e-view option="Day"></e-view>
      <e-view option="Week"></e-view>
</e-views>
Q4: When the save button is clicked, below event will be triggered.
 
 
onActionBegin(args: ActionEventArgs): void {
    if (args.requestType == "eventCreate") {
      console.log("Save Button clicked");
    }
}
 
Regards, 
Balasubramanian S 



DD Dinesh D November 8, 2019 06:47 AM UTC

Hi ,
Thanks for your response. i have some issues listed below

1)I need to enter time while booking when user is in month view mode, In your demo time is removed



2) And one more thing if one person booked the room for a particular time, that time should be disabled to book again, that means 9 to 9.30 is booked already means that time should be disabled in the calendar completely

3)I used a customized function to save data and retrive in a database. I am facing issues like, if am booking from 9.30 to 10.00 in calendar it is showing as 6.30 to 7 and moreover i am having some error in console i have attached the screenshots below



Actually i booked from 9 to 9.30 it is showing as 6.30 to 7 in the calendar.
i have attached my code here

CODE TO GET DATA FROM DB:
{
  this.bookingservice.getCalender().subscribe((tabdata:any)=>{
    this.getData=tabdata;
    console.log(this.getData);
    this.eventData=
    {
      dataSourcethis.getData,
      fields: {
        id'Id',
        subject: { name'event' },
        startTime: { name'startTime' },
        endTime: { name'endTime' },
        
      },
      enableTooltiptrue
      
    };
  }
  
  );

}

CODE TO STORE DATA TO DB:

onActionBegin(argsActionEventArgs): void {
  if (args.requestType === 'eventCreate') { 
this.title=args.data[0].Subject;
this.fromDate=args.data[0].StartTime;   
console.log(this.fromDate)
this.toDate=args.data[0].EndTime;
this.calendarData=
{
  userName:this.userName,
  emailId:this.emailId,
  location:this.locselected,
  lab:this.labselected,
  startTime:this.fromDate,
  endTime:this.toDate,
  event:this.title,
}
console.log("add",this.calendarData)
this.bookingservice.book_func(this.calendarData).subscribe((data=> {
  this.getCalenderData();
  console.log("hitting url");
})
}  
}

MY CONSOLE WINDOW IS:



Popup window to is closed if i save the data since it is showing error. 

Please take this as a priority issue and help me out







BS Balasubramanian Sattanathan Syncfusion Team November 11, 2019 01:01 PM UTC

Hi Dinesh D, 

 
Greetings from Syncfusion Support. 

 
Q1: We have prepared sample based on your requirement.  

 

 
Kindly try the above sample and let us know if you need any further assistance on this.
 

 
Q2: We suspect that your requirement is related to 'isSlotAvailable'. Kindly refer below link. 


 
Q3: We suspect that your reported issue is related to timezone, So kindly share your timezone details for serve you better 

 
Regards, 
Balasubramanian S 



DD Dinesh D November 12, 2019 09:15 AM UTC

Hi,

Thanks for the solution. I got answer for all the questions,

I have one more requirement. How to disable the past date and time while creating a event. For example current date and time is 11-12-2019 ans 2.44 PM. All the past date and time should be disabled while creating the event

Can you please help me out


VD Vinitha Devi Murugan Syncfusion Team November 13, 2019 07:41 AM UTC

Hi Dinesh, 
 
Thanks for your update. 
 
We achieved your requirement by making use of eventRendered event and CSS and same can be available in below link. 


 onRenderCell(args: RenderCellEventArgs): void { 
    // Add disable-date class to disable the past date and time 
      if (args.date < new Date()) { 
        args.element.classList.add('disable-dates'); 
      }  
  } 
 
.disable-dates{   
    opacity: .5; 
    pointer-events: none; 
} 
 
Regards, 
M.Vinitha devi 



DD Dinesh D November 15, 2019 04:44 AM UTC

Thank You Sync-fusion team,I achieved my requirement. I have one more requirement



This is my Editor Window, In  that I need a select(dropdown) input tag instead of "Title"text- input tag. Can you please help me to achieve the requirement.


VD Vinitha Devi Murugan Syncfusion Team November 15, 2019 01:03 PM UTC

Hi Dinesh, 
 
Thanks for your update. 
 
We prepared sample for your requirement with CSS and popupOpen event. Please refer the below sample. 
 

// To hide subject field 
 .e-subject-container{ 
      display:none; 
      } 
 
Please refer below UG for event window customization. 
 
Regars, 
M.Vinitha devi 


Loader.
Live Chat Icon For mobile
Up arrow icon