1. Home
  2. Forum
  3. Vue
  4. Add isAllDay CheckBox

Add isAllDay CheckBox

i am using 

 if (args.type === "Editor") {
        // Divider
        console.log(args.data);
        let descriptionElement = args.element.querySelector("#description");
        // alert(descriptionElement.value);
        if (!descriptionElement.classList.contains("e-dropdownlist")) {
          let dropDownListObject = new TextBox({
            value: args.data.description,
            placeholder: this.$t("Description")
          });
          dropDownListObject.appendTo(descriptionElement);
          descriptionElement.setAttribute("name", "description");
        }

        let doctorNameElement = args.element.querySelector("#doctorName");
        // alert(doctorNameElement.value);
        if (!doctorNameElement.classList.contains("e-dropdownlist")) {
          let dropDownListObject = new DropDownList({
            fields: { text: "fullName", value: "userId" },
            value: args.data.doctorId,
            placeholder: this.$t("DoctorName"),
            allowFiltering: true,
            dataSource: this.DoctorsList
          });
          dropDownListObject.appendTo(doctorNameElement);
          doctorNameElement.setAttribute("name", "doctorId");
        }

        let roomElement = args.element.querySelector("#roomName");
        // alert(doctorNameElement.value);
        if (!roomElement.classList.contains("e-dropdownlist")) {
          let dropDownListObject = new DropDownList({
            fields: { text: "roomName", value: "roomId" },
            value: args.data.roomId,
            placeholder: this.$t("roomName"),
            allowFiltering: true,
            dataSource: this.Rooms
          });
          dropDownListObject.appendTo(roomElement);
          roomElement.setAttribute("name", "roomId");
        }

        let patientSearchElement = args.element.querySelector("#patientName");
        if (!patientSearchElement.classList.contains("e-dropdownlist")) {
          let dropDownListObject = new DropDownList({
            fields: { text: "patientName", value: "patientId" },
            value: args.data.patientId,
            placeholder: this.$t("PatientName"),
            allowFiltering: true,
            filtering: this.GetPatientSearchByName,
            dataSource: this.PatientList
          });
          dropDownListObject.appendTo(patientSearchElement);
          patientSearchElement.setAttribute("name", "patientId");
        }

        let statusElement = args.element.querySelector("#status");
        // alert(args.data.status);
        if (!statusElement.classList.contains("e-dropdownlist")) {
          let dropDownListObject = new DropDownList({
            fields: { text: "Value", value: "Code" },
            value: args.data.status,
            placeholder: "Choose status",
            dataSource: this.CalendarStatusList
          });
          dropDownListObject.appendTo(statusElement);
          statusElement.setAttribute("name", "status");
        }

        let startElement = args.element.querySelector("#startTime");
        if (!startElement.classList.contains("e-datetimepicker")) {
          new DateTimePicker(
            { value: new Date(startElement.value) || new Date() },
            startElement
          );
        }
        let endElement = args.element.querySelector("#endTime");
        if (!endElement.classList.contains("e-datetimepicker")) {
          new DateTimePicker(
            { value: new Date(endElement.value) || new Date() },
            endElement
          );
        }
      }



i want to add isAllDay



2 ) how to edit tooltip data


3 Replies 1 reply marked as answer
RV Ravikumar Venkatesan Syncfusion Team April 13, 2021 08:56 AM UTC

Hi Hani, 

Greetings from Syncfusion support. 

I want to add isAllDay 
We have validated your above requirement at our end and added the IsAllDay field to the editorTemplate for the same, we have prepared a sample that can be available from the below link. 


[App.vue] 
<script> 
import Vue from "vue"; 
import { CheckBox } from "@syncfusion/ej2-buttons"; 
 
Vue.use(SchedulePlugin); 
 
var editorTemplateVue = Vue.component("editorTemplate", { 
  template: `<table class="custom-event-editor" width="100%" cellpadding="5"> 
  <tbody> 
    <tr> 
      <td class="e-textlabel">AllDay</td> 
      <td colspan="4"> 
        <input id="IsAllDay" class="e-field" type="text" name="IsAlDay" /> 
      </td> 
    </tr> 
  </tbody> 
</table>`, 
  data() { 
    return { 
      data: {}, 
    }; 
  }, 
}); 
 
export default { 
  data() { 
    return { 
      editorTemplate: function (e) { 
        return { 
          template: editorTemplateVue, 
        }; 
      }, 
    }; 
  }, 
  methods: { 
    onPopupOpen: function (args) { 
      if (args.type === "Editor") { 
        let allDayEle = args.element.querySelector("#IsAllDay"); 
        if (!allDayEle.classList.contains("e-checkbox")) { 
          let scheduleObj = this.$refs.scheduleObj.ej2Instances; 
          if (scheduleObj.currentView === "Month" || args.target.classList.contains("e-header-cells") || args.target.classList.contains("e-all-day-cells") || args.target.classList.contains("e-all-day-appointment")) { 
            new CheckBox({ checked: true, change: this.onCheck }, allDayEle); 
          } else { 
            new CheckBox({ checked: false, change: this.onCheck }, allDayEle); 
          } 
        } 
      } 
   }, 
    onCheck(args) { 
      if (args.checked === true) { 
        document.querySelectorAll(".e-time-icon")[1].classList.add("e-icon-disable"); 
        document.querySelectorAll(".e-time-icon")[0].classList.add("e-icon-disable"); 
        document.querySelector("#StartTime").ej2_instances[0].format = "M/d/yy"; 
        document.querySelector("#EndTime").ej2_instances[0].format = "M/d/yy"; 
        document.querySelector("#StartTime").ej2_instances[0].value.setHours(0, 0, 0); 
        document.querySelector("#EndTime").ej2_instances[0].value.setDate(document.querySelector("#StartTime").ej2_instances[0].value.getDate() + 1); 
        document.querySelector("#EndTime").ej2_instances[0].value.setHours(0, 0, 0); 
        document.querySelector("#StartTime").ej2_instances[0].dataBind(); 
      } else { 
        document.querySelectorAll(".e-time-icon")[1].classList.remove("e-icon-disable"); 
        document.querySelectorAll(".e-time-icon")[0].classList.remove("e-icon-disable") 
        document.querySelector("#StartTime").ej2_instances[0].format = "M/d/yy h:mm a" 
        document.querySelector("#EndTime").ej2_instances[0].format = "M/d/yy h:mm a"; 
        document.querySelector("#StartTime").ej2_instances[0].dataBind(); 
      } 
    }, 
  }, 
  provide: { 
    schedule: [Day, Week, WorkWeek, Month], 
  }, 
}; 
</script> 

How to edit tooltip data 
We have validated your above query at our end and you can customize the Schedule tooltip with the help of the tooltipTemplate property of the Schedule. Refer to the below UG link for more details. 


Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Marked as answer
HA Hani April 13, 2021 10:57 AM UTC

Thank you, it all works well...

NR Nevitha Ravi Syncfusion Team April 14, 2021 07:21 AM UTC

Hi Hani, 

You are most welcome..! We are glad that our provided solution helped at your end. Please get back to us if you need any further assistance. 

Regards, 
Nevitha 


Loader.
Up arrow icon