Display full text

[Fernando]

Hi

How to configure the calendar cell to display the full text and remove appointment times? And how to change de font-size appointment?

<ejs-schedule id="schedule" locale="pt" height="350">
    <e-schedule-views>
        <e-schedule-view option="Month"></e-schedule-view>
    </e-schedule-views>
    <e-schedule-eventsettings dataSource="@ViewBag.dadoscalendario" ></e-schedule-eventsettings>
</ejs-schedule>

Thanks

Fernando

[Swathi Ravi]

Hi Fernando,

Thank you for reaching out with your queries about customizing the appointment display in the Scheduler.

How to configure the calendar cell to display the full text and remove appointment times?

To display the full text and remove appointment times, you can use the ScheduleEventSettings template in the Scheduler. This template allows you to customize the content of each appointment to fit your specific needs. Below is a demonstration of how you can implement this:

[index.cshtml]

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2023, 2, 15)">

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

     <e-schedule-views>

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

    </e-schedule-views>

</ejs-schedule>

<style>

    .e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {

        padding: 0;

        height: 100%;

    }

    .e-schedule .template-wrap {

        height: 100%;

        white-space: normal;

    }

    .e-schedule .template-wrap .subject {

        font-size: 13px;

        text-overflow: ellipsis;

        white-space: nowrap;

        overflow: hidden;

    }

</style>

[HomeController.cs]

public class HomeController : Controller

{

    public ActionResult Index()

    {

        ViewBag.datasource = GetWebinarData();

        ViewBag.template = "<div class='template-wrap'><div class='subject'>${Subject}</div></div>";

        return View();

    }

}

Sample: A sample project is attached as a zip file.

For further details on using templates within the Scheduler, you may refer to the following documentation and demos:

• User Guide
• Demo

How to change the font-size appointment?

You can easily change the font size of the appointment subject by applying the following CSS class:

 .e-schedule .template-wrap .subject {

        font-size: 13px;

  }

Please let us know if you need any further assistance or clarification.

Regards,

Swathi

Attachment: aspcoreschedulerappointmenttemplate_f56731c1.zip

[Fernando]

Hi Swathi,

It worked perfectly.

Thanks

[Ashokkumar Karuppasamy]

Hi Fernando,

Thanks for the update. We're glad to hear that the provided solution meets your requirements.

Regards,

Ashok