Scheduler Event Width

[TaeWook Kang]

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>

[TaeWook Kang]

Please check if there is a problem with the sidebar.

Attachment: schedule_5be4e9f9.zip

[Ruksar Moosa Sait]

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:

Attachment: Asp.netCoreSidebarSchedule_4b7ebeba.zip

[TaeWook Kang]

 

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">

Attachment: databinding_error_255e3394.zip

[Satheesh Kumar Balasubramanian]

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>

Attachment: Asp.netCoreSidebarSchedule_4b7ebeba_85916b43.zip

[TaeWook Kang]

Our 'side bar' is located in 'layout' and we have to call each of these.

Each 'cshtml' should be called.

[Ravikumar Venkatesan]

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();

        }

    }

Attachment: ejcoreschedulewithsidbar_c77214ec.zip

[TaeWook Kang]

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

Attachment: databinding_84d37da.zip

[Ruksar Moosa Sait]

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

    }

Attachment: ejcoreschedulewithsidbarModified_111b0ae3.zip

[TaeWook Kang]

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

[TaeWook Kang]

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

[Ruksar Moosa Sait]

We are glad to know that your issue is resolved. Please get back to us if you need any other assistance.