How to render Scheduler with Accordion?

This knowledge base article explains the way to render Scheduler within Accordion.

Step 1: Create an MVC application with default Accordion code example by referring the below user guide link.

https://ej2.syncfusion.com/aspnetmvc/documentation/accordion/getting-started-asp-mvc/

Also define the Expanding client-side event as shown in the following code example.

@Html.EJS().Accordion("defaultAccordion").Items(ViewBag.accordionItems).Expanding("onExpand").Render()

Step 2: Define the Accordion items at controller side as shown in the following code example.

public ActionResult Index()
{
    List<AccordionAccordionItem> accItems = new List<AccordionAccordionItem>();
    accItems.Add(new AccordionAccordionItem { Header = "Click to view Scheduler", Content = "#Current_Enrolments" });
    ViewBag.accordionItems = accItems;
    return View();
}

Step 3: Define the Schedule with the Created client-side event within the div element whose id mapped to Accordion content as shown in the following code example.

<div id="Current_Enrolments" style="display: none">
    @Html.EJS().Schedule("schedule").Width("100%").Height("500px").Created("onCreate").SelectedDate(new DateTime(2018, 4, 22)).Render()
</div>

Step 3: Within the Created client-side event, initialize the public boolean variable as shown in the following code example.

function onCreate(args) {
        isInitial = true;
    }

Step 4: Within the Expanding client-side event refresh the Schedule only for the first time as shown in the following code example.

function onExpand(args) {
        if (isInitial) {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            scheduleObj.refresh();
            isInitial = false;
        }
    }

Step 4: Run the sample and expand the Accordion to view Schedule as shown in the following images.

    Figure 1: Default Accordion before expanding.

    Figure 2: Accordion displaying Schedule after expanding.

Please refer the example from the following GitHub links.

Example – Schedule_within_Accordion