cell customization

[lamia]

hello,

I am trying to add a number next to the hours in timelineweek view  like showing bellow

how do i acheive this either using rendercell event or template

Thank you

[Ashokkumar Karuppasamy]

Hi lamia,

Based on the shared details, we have achieved your requirement using the renderCell event. The attached code snippet demonstrate the solution. Please try this solution and let us know if you need any further assistance.

@using Syncfusion.EJ2.Schedule

 

<ejs-schedule id="schedule" selectedDate="new DateTime(2023, 4, 3)" renderCell="onRendercell">

    <e-schedule-eventsettings dataSource="@ViewBag.dataSource">

    </e-schedule-eventsettings>

    <e-schedule-group resources="@ViewBag.Resources"></e-schedule-group>

    <e-schedule-resources>

        <e-schedule-resource dataSource="@ViewBag.Owners" field="OwnerId" title="Owner" name="Owners" textField="OwnerText" idField="Id" colorField="OwnerColor" allowMultiple="true"></e-schedule-resource>

    </e-schedule-resources>

    <e-schedule-timescale enable="true" interval="30" slotCount="3"></e-schedule-timescale>

    <e-schedule-views>

        <e-schedule-view option="Day"></e-schedule-view>

    </e-schedule-views>

</ejs-schedule>

<script type="text/javascript">

    function onRendercell(args) {

        console.log(args);

        const customNumber = 0;

 

        // Corrected the class checking methods

        if (args.element.classList.contains('e-time-slots') && !args.element.classList.contains('e-time-cells')) {

 

            let numberSpan = args.element.querySelector('.custom-number');

            if (!numberSpan) {

                // If it doesn't exist, create a new span

                numberSpan = document.createElement('span');

                numberSpan.className = 'custom-number';

                numberSpan.style.marginLeft = '5px'; // Add some spacing

                args.element.appendChild(numberSpan);

            }

            // Update the content of the span

            numberSpan.innerText = `(${customNumber})`;

        }

    }

</script>

 

 

Regards,

Ashok

[lamia]

thank you for your response it(s  quite helpfull , i want to get the value of the numer vis ajax fuction that needs the hour value as aparameter . how can i acheive this please.

thank you

[Ashokkumar Karuppasamy]

Hi lamia,

Based on the details shared, we have prepared samples using an AJAX function that requires the hour value as a parameter. The attached code snippet demonstrates the solution. Please try it out and let us know if you need any further assistance.

[index.cshtml]

@using Syncfusion.EJ2.Schedule

 

<ejs-schedule id="schedule" selectedDate="new DateTime(2023, 4, 3)" renderCell="onRendercell">

    <e-schedule-eventsettings dataSource="@ViewBag.dataSource">

    </e-schedule-eventsettings>

    <e-schedule-group resources="@ViewBag.Resources"></e-schedule-group>

    <e-schedule-resources>

        <e-schedule-resource dataSource="@ViewBag.Owners" field="OwnerId" title="Owner" name="Owners" textField="OwnerText" idField="Id" colorField="OwnerColor" allowMultiple="true"></e-schedule-resource>

    </e-schedule-resources>

    <e-schedule-timescale enable="true" interval="30" slotCount="3"></e-schedule-timescale>

    <e-schedule-views>

        <e-schedule-view option="Day"></e-schedule-view>

    </e-schedule-views>

</ejs-schedule>

<script type="text/javascript">

 

    function sendHourValue(hour) {

        return new Promise((resolve, reject) => {

            $.ajax({

                type: "POST",

                url: "/home/Index", // Ensure the endpoint is correct

                data: { hour: hour },

                success: function (response) {

                    console.log("Response from server:", response);

                    resolve(response); // Resolve the promise with the server response

                },

                error: function (xhr, status, error) {

                    console.error("AJAX Error:", error);

                    reject(error); // Reject the promise on error

                }

            });

        });

    }

 

    async function onRendercell(args) {

        console.log(args);

        const customNumber = 0;

 

        // Corrected the class checking methods

        if (args.element.classList.contains('e-time-slots') && !args.element.classList.contains('e-time-cells')) {

 

            let numberSpan = args.element.querySelector('.custom-number');

            if (!numberSpan) {

                // If it doesn't exist, create a new span

                numberSpan = document.createElement('span');

                numberSpan.className = 'custom-number';

                numberSpan.style.marginLeft = '5px'; // Add some spacing

                args.element.appendChild(numberSpan);

            }

 

            try {

                // Await the response from sendHourValue and update the content of the span

                const response = await sendHourValue(customNumber);

                numberSpan.innerText = response.receivedHour; // Assuming response has a property 'rereceivedHour'

            } catch (error) {

                console.error("Failed to send hour value:", error);

            }

        } else {

            // Call sendHourValue directly if not a time slot

            sendHourValue(customNumber);

        }

    }

 

</script>

[Homecontroller]

        public ActionResult Index(int hour)

        {

            // Process the hour value here

            Console.WriteLine($"Received hour: {hour}");

 

            // Return a response

            return Json(new { success = true, receivedHour = hour });

        }

Regards,
Ashok

[lamia]

hello thank you for  your response  but i need to get the value of the hours and minutes displayed in the schedule

[Swathi Ravi]

Lamia,

[lamia]

what is the response         ???

[Vijay Ravi]

Hi lamia,

You can Update the onRendercell Function. In the onRendercell function, capture the hours and minutes from the time slot and pass them to the AJAX function.
 

 

<script type="text/javascript">

    function sendTimeValue(hours, minutes) {

        return new Promise((resolve, reject) => {

            $.ajax({

                type: "POST",

                url: "/home/Index", // Ensure the endpoint is correct

                data: { hour: hours, minute: minutes },

                success: function (response) {

                    console.log("Response from server:", response);

                    resolve(response); // Resolve the promise with the server response

                },

                error: function (xhr, status, error) {

                    console.error("AJAX Error:", error);

                    reject(error); // Reject the promise on error

                }

            });

        });

    }

    async function onRendercell(args) {

        console.log(args);

        

        // Ensure this checks the appropriate element

        if (args.element.classList.contains('e-time-slots') && !args.element.classList.contains('e-time-cells')) {

            const dateTime = new Date(args.date);

            const hours = dateTime.getHours();

            const minutes = dateTime.getMinutes();

            

            let numberSpan = args.element.querySelector('.custom-number');

            if (!numberSpan) {

                // If it doesn't exist, create a new span

                numberSpan = document.createElement('span');

                numberSpan.className = 'custom-number';

                numberSpan.style.marginLeft = '5px'; // Add some spacing

                args.element.appendChild(numberSpan);

            }

            try {

                // Await the response from sendTimeValue and update the content of the span

                const response = await sendTimeValue(hours, minutes);

                numberSpan.innerText = `Hour: ${response.receivedHour}, Minute: ${response.receivedMinute}`; // Assuming response has the properties

            } catch (error) {

                console.error("Failed to send hour value:", error);

            }

        } else {

            // Call sendTimeValue directly if not a time slot

            sendTimeValue(hours, minutes);

        }

    }

</script>

 

// HomeController

public ActionResult Index(int hour, int minute) {

    // Process the hour and minute values here

    Console.WriteLine($"Received hour: {hour}, minute: {minute}");

    

    // Return a response

    return Json(new { success = true, receivedHour = hour, receivedMinute = minute });

}

Don't hesitate to get in touch if you require further help or more information.

 

Regards,

Vijay