WindowCustomizationFuction Edit Repeating Event

[Ede Gross]

Hi,

I am using the scheduler with the WindowCustomizationFuction.

I want to edit a repeating event, but I am not sure how I can change only one event instead of every event.

Is there a way to do that?

 

[Yavor Dashev]

Hi Ede Gross,

I have created a code snippet to showcase how to handle such situation.

In your JavaScript:

<div>
<div> scheduler.windowCustomizationFunction = (target, type, event, e) => {</div>
<div>        if (type === 'confirm') {</div>
<div>            let footerTemplate= target.querySelector('.smart-footer');</div>
<div>            footerTemplate.style.display = 'none';</div>
<div>            let btnElementEditEvent = document.createElement('smart-button');</div>
<div>            let btnElementEditSeries = document.createElement('smart-button');</div>
<div>            btnElementEditSeries.classList.add('smart-scheduler-window-button');</div>
<div>            btnElementEditEvent.classList.add('smart-scheduler-window-button');</div>
<div>            btnElementEditSeries.classList.add('edit-series');</div>
<div>            btnElementEditEvent.classList.add('edit-event');</div>
<div>            btnElementEditSeries.innerText = 'Edit series';</div>
<div>            btnElementEditEvent.innerText = 'Edit event';</div>
<div>            btnElementEditEvent.ariaLabel = 'edit-event';</div>
<div>            let confirmEl = document.getElementById('schedulerConfirmWindowContent');</div>
<div>            confirmEl.appendChild(btnElementEditEvent);</div>
<div>            confirmEl.appendChild(btnElementEditSeries);</div>
<div>            btnElementEditEvent.onclick = () => {</div>
<div>                scheduler.windowCustomizationFunction = null;</div>
<div>            }</div>
<div>            btnElementEditSeries.onclick = () => {</div>
<div>                scheduler.windowCustomizationFunction = null;</div>
<div>            }</div>
<div>        }</div>
<div>    }

</div>
</div>
<div>Let me know if this works for you!</div>
<div></div>
<div>Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/</div>

[Ede Gross]

It works, but I still have a question.

I still want to use the windowCustomizationFuction, but I want to know how to save the event.

E.g. I have a series named “XYZ” which occurs 5 times, but I want the 3rd time to be one hour later.

I am working with a database and I want to know, if I can change the date or name of another Event and save it?

[Yavor Dashev]

Hi Ede Gross,

You can bind for the itemUpdate  event to record the change of the event.

Quick code snippet for this use case:

 scheduler.addEventListener('itemUpdate', function (event) {
<div>
<div>        const detail = event.detail,</div>
<div>            item = detail.item;</div>
<div>        console.log(item)</div>
<div>    })

</div>
</div>
<div>Or you can use the updateEvent method in order to update an Event of the Scheduler compoent.</div>
<div>More info about it you can find in the Scheduler API: https://www.htmlelements.com/docs/scheduler-api/</div&gt;
<div></div>
<div>

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

</div>

[Ede Gross]

How would the dataSource look like after editing?

E.g. I have this repeating event.

<span class="pun">{</span><span class="pln">
                label</span><span class="pun">:</span> <span class="str">'Google AdWords Strategy'</span><span class="pun">,</span><span class="pln">
                dateStart</span><span class="pun">:</span> <span class="kwd">new</span> <span class="typ">Date</span><span class="pun">(</span><span class="pln">currentYear</span><span class="pun">,</span><span class="pln"> currentMonth</span><span class="pun">,</span> <span class="lit">10</span><span class="pun">,</span> <span class="lit">9</span><span class="pun">,</span> <span class="lit">0</span><span class="pun">),</span><span class="pln">
                dateEnd</span><span class="pun">:</span> <span class="kwd">new</span> <span class="typ">Date</span><span class="pun">(</span><span class="pln">currentYear</span><span class="pun">,</span><span class="pln"> currentMonth</span><span class="pun">,</span> <span class="lit">11</span><span class="pun">,</span> <span class="lit">10</span><span class="pun">,</span> <span class="lit">30</span><span class="pun">),</span><span class="pln">
                allDay</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">
                backgroundColor</span><span class="pun">:</span> <span class="str">'#F57F17'</span><span class="pun">,</span><span class="pln">
                repeat</span><span class="pun">:</span> <span class="pun">{</span><span class="pln">
                    repeatFreq</span><span class="pun">:</span> <span class="str">'weekly'</span><span class="pun">,</span><span class="pln">
                    repeatInterval</span><span class="pun">:</span> <span class="lit">5</span><span class="pun">,</span><span class="pln">
                    repeatOn</span><span class="pun">:</span> <span class="pun">[</span><span class="lit">0</span><span class="pun">,</span> <span class="lit">2</span><span class="pun">,</span> <span class="lit">5</span><span class="pun">],</span><span class="pln">
                    repeatEnd</span><span class="pun">:</span> <span class="kwd">new</span> <span class="typ">Date</span><span class="pun">(</span><span class="pln">currentYear</span><span class="pun">,</span><span class="pln"> currentMonth </span><span class="pun">+</span> <span class="lit">2</span><span class="pun">,</span> <span class="lit">24</span><span class="pun">)</span>
                <span class="pun">}</span>

</span>For example I want the second weekly occurance to only be on Sunday and Friday instead of Sunday, Tuesday and Friday. How would this array then look like?

• This reply was modified 2 years, 11 months ago by Ede Gross.

[Ede Gross]

Nervermind I figured it out, it is also marked as an “exception” in the dataSource.

Sorry for bothering

[Author]

Posts