Hello,
The data were listed and sent in the form of 'View Bag'.
The setting of 'isallday' is set to 'true'.
When you first open the screen, it sticks out at the end.
Resizing the screen will adjust the size of the event.
' .e-schedule .e-month-view .e-appointment {
color: #000000;
width: 172px !important;
}'
This method is difficult because it comes out fixed even when the window window is small when it is set to
Also,
'document.addEventListener('DOMContentLoaded', function () {
document.getElementById('schedule').ej2_instances[0].refresh();
});'
This way won't solve it.
<ejs-schedule id="schedule" height="630" currentView="Month" width="100%" allowDragAndDrop="false" allowResizing="false" readonly="true" rowAutoHeight="false">
<e-schedule-views>
<e-schedule-view option="Month"></e-schedule-view>
</e-schedule-views>
<e-schedule-resources>
<e-schedule-resource field="ProjectId" title="Choose Project" dataSource="@ViewBag.Projects" allowMultiple="true" name="Projects" textField="Text" idField="ProjectId" colorField="Color">
</e-schedule-resource>
</e-schedule-resources>
<e-schedule-eventsettings dataSource="@ViewBag.PLAN">
<e-eventsettings-fields id="ID">
<e-field-subject name="SUBJECT"></e-field-subject>
<e-field-description name="DESCRIPTION"></e-field-description>
<e-field-starttime name="STARTTIME"></e-field-starttime>
<e-field-endtime name="ENDTIME"></e-field-endtime>
<e-field-isallday name="ISALLDAY"></e-field-isallday>
</e-eventsettings-fields>
</e-schedule-eventsettings>
</ejs-schedule>
To resolve this issue, call the refreshEvents of the schedule instance in the dataBinding event of the scheduler.
Index.cshtml]
function onDataBinding(args) { var scheduleObj = document.getElementById('schedule').ej2_instances[0]; scheduleObj.refreshEvents(); } |
Output:
Thank you for your answer
I did what you told me, and it was solved, but another problem arises
If you click on 'event', it doesn't work like 'popup' and 'more'
When "eventRefresh" is performed in "dataBinding" or "dataBound", it is repeated over and over again
<ejs-schedule id="schedule" height="630" currentView="Month" width="100%" allowDragAndDrop="false" allowResizing="false" readonly="true" rowAutoHeight="false" dataBinding="onDataBinding">
You can call the refreshEvents of the schedule instance in the change event of the sidebar to resolve this issue.
Index.cshtml:
<div class="control-section"> <div id="wrapper"> <ejs-sidebar id="menuSidebar" htmlAttributes="HtmlAttribute" change="onChange" enableDock="true" dockSize="50px" width="220px" target=".main-content" isOpen="true" type="Auto"> </ejs-sidebar> </div> </div>
<script> document.addEventListener('DOMContentLoaded', function () { sidebarObj = document.getElementById("menuSidebar").ej2_instances[0]; }); function toolbarCliked(args) { if (args.item.tooltipText == "Menu") { sidebarObj.toggle(); } } function onChange(args) { var scheduleObj = document.getElementById('schedule').ej2_instances[0]; scheduleObj.refreshEvents(); } </script> |
Our 'side bar' is located in 'layout' and we have to call each of these.
Each 'cshtml' should be called.
You can refresh the Schedule events while toggling the sidebar only for the Schedule rendered page as shown in the below code snippet.
[Index.cshtml]
function onChange(args) { // Querying the Schedule element. The element is only available if the Schedule rendered on the current page var schedule = document.querySelector('.e-schedule'); // The condition will pass if a valid Schedule is rendered on the page if (schedule && schedule.ej2_instances[0]) { schedule.ej2_instances[0].refreshEvents(); } } |
Thank you for your answer.
We have a problem that needs to be solved first.
Using 'databinding' certainly solves the problem.
When 'databinding' is performed, there is a problem of continuously executing 'refreshEvent'.
The same problem occurs when we use 'dataBound'.
I want you to do "refresh" once after "event" is all set up.
I can't check the 'popup' windows of 'event' because I keep running 'refreshEvent'
<ejs-schedule id="schedule" height="630" currentView="Month" width="100%" allowDragAndDrop="false" allowResizing="false" readonly="true" rowAutoHeight="false" dataBinding="onDataBinding">
function onDataBinding(args) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.refreshEvents();
}
Refreshing the events in the dataBinding event of the Schedule will create an infinite looping. We shared the solution incorrectly on the schedule's data-binding event. We suggest you call the refreshEvents method of the scheduler using the setTimeout function in the sidebar created event and use the sidebar change event as shown below in the code
<ejs-sidebar id="menuSidebar" htmlAttributes="HtmlAttribute" change="onChange" created="sidebarCreated" enableDock="true" dockSize="50px" width="220px" target=".main-content" isOpen="true" type="Auto"> <e-content-template> <div class="main-menu"> <div> <ejs-menu id="dockMenu" items="MainMenuItems" orientation="Vertical" cssClass="dock-menu"> </ejs-menu> </div> </div> </e-content-template> </ejs-sidebar> |
function refreshScheduler(){ // Querying the Schedule element. The element is only available if the Schedule rendered on the current page var schedule = document.querySelector('.e-schedule'); // The condition will pass if a valid Schedule is rendered on the page if (schedule && schedule.ej2_instances[0]) { schedule.ej2_instances[0].refreshEvents(); } } function onChange(args) { refreshScheduler(); } function sidebarCreated() { setTimeout(() => {refreshScheduler()},1000); } |
If it's not a problem to solve with 'data binding', how should we solve it?
It is a priority for us to resolve the event size
I finally solved all the problems.
I solved all the problems using 'setTimeOut'
Thank you for your answer
window.document.addEventListener('DOMContentLoaded', function () {
setTimeout(() => { document.getElementById('schedule').ej2_instances[0].refreshEvents() }, 700);
});
We are glad to know that your issue is resolved. Please get back to us if you need any other assistance.