JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Scheduler › WindowCustomizationFuction Edit Repeating Event
Tagged: event, repeat, Scheduler, windowcustomizationfunction
- This topic has 5 replies, 2 voices, and was last updated 2 years, 10 months ago by Ede Gross.
-
AuthorPosts
-
December 15, 2021 at 10:07 am #102654Ede GrossParticipant
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?
December 15, 2021 at 5:49 pm #102658Yavor DashevParticipantHi 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 DashevSmart UI Team
https://www.htmlelements.com/</div>December 16, 2021 at 8:34 am #102659Ede GrossParticipantIt 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?
December 16, 2021 at 3:34 pm #102660Yavor DashevParticipantHi 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 theupdateEvent
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>
<div></div>
<div>Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor DashevSmart UI Team
https://www.htmlelements.com/</div>
December 20, 2021 at 7:17 am #102664Ede GrossParticipantHow 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, 10 months ago by Ede Gross.
December 20, 2021 at 8:18 am #102667Ede GrossParticipantNervermind I figured it out, it is also marked as an “exception” in the dataSource.
Sorry for bothering
-
AuthorPosts
- You must be logged in to reply to this topic.