JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Scheduler WindowCustomizationFuction Edit Repeating Event

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102654
    Ede Gross
    Participant
    Up
    0
    Down

    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?

     

    #102658
    Yavor Dashev
    Participant
    Up
    0
    Down

    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>

    #102659
    Ede Gross
    Participant
    Up
    0
    Down

    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?

    #102660
    Yavor Dashev
    Participant
    Up
    0
    Down

    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>

    #102664
    Ede Gross
    Participant
    Up
    0
    Down

    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 1 month ago by Ede Gross.
    #102667
    Ede Gross
    Participant
    Up
    1
    Down

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

    Sorry for bothering

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.