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

Scheduler Event Width

Hello,

The data were listed and sent in the form of 'View Bag'.

화면 캡처 2022-11-09 085944.png


The setting of 'isallday' is set to 'true'.


화면 캡처 2022-11-09 085626.png

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>



11 Replies

TK TaeWook Kang November 8, 2022 07:52 PM

Please check if there is a problem with the sidebar.


Attachment: schedule_5be4e9f9.zip


RM Ruksar Moosa Sait Syncfusion Team November 10, 2022 09:24 AM

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:

A screenshot of a computer

Description automatically generated



Attachment: Asp.netCoreSidebarSchedule_4b7ebeba.zip


TK TaeWook Kang November 10, 2022 08:00 PM

 

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


SK Satheesh Kumar Balasubramanian Syncfusion Team November 14, 2022 05:39 AM

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


TK TaeWook Kang November 14, 2022 07:32 PM

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

Each 'cshtml' should be called.




RV Ravikumar Venkatesan Syncfusion Team November 15, 2022 10:56 AM

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


TK TaeWook Kang November 15, 2022 08:50 PM

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


RM Ruksar Moosa Sait Syncfusion Team November 16, 2022 11:03 AM

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


TK TaeWook Kang November 17, 2022 08:32 PM

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



TK TaeWook Kang replied to Ruksar Moosa Sait November 18, 2022 12:42 AM

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


RM Ruksar Moosa Sait Syncfusion Team replied to TaeWook Kang November 18, 2022 05:43 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon