UI Builder Calander Component Timeline sections

[Dharmesh Desai]

Hi All,

I working with SN version Washington D.C. in the PDI. I install the Time Off template to App Engine Studio, and created a new page in the workspace that uses the calendar control

I would like to use the Timeline-Day view, but I'm unable to figure out how to add the events to the below JSON structure. The documentation in for the component does not share the json structure.

Does anyone in the community have any experience working the this component?

Timeline section JSON:

-------------------------------------------

[

    {

        "id": "PTOTYPE_VAC",

        "title": "Vacations",

        "isCollapsed": true,

        "showHeader": true,

        "children": [

            {

                "id": "pto_vacation",

                "title": "Person A",

                "isCollapsed": true,

                "showHeader": true

            },

            {

                "id": "ITBM_IDC",

                "title": "Person B",

                "isCollapsed": true,

                "showHeader": true

            }

        ],

        "bgColor": "#7393f1"

    },

    {

        "id": "PTOTYPE_SIC",

        "title": "Sick Days",

        "isCollapsed": true,

        "showHeader": true,

        "children": [

            {

                "id": "sys_id_C",

                "title": "Person C",

                "isCollapsed": true,

                "showHeader": true

            },

            {

                "id": "sys_id_D",

                "title": "Person D",

                "isCollapsed": true,

                "showHeader": true

            }

        ],

        "bgColor": "#e46c8e"

    }

]

 -------------------------------------------------------------

Timeline vertical lines JSON:

[

    {

        "inlineStyle": {

            "width": "2px",

            "height": "100%",

            "margin": "0 auto",

            "backgroundColor": "#fff",

            "backgroundRepeat": "repeat-y",

            "backgroundSize": "100% 88px",

            "backgroundPosition": "0% 0%"

        },

        "utcMS": 1737059107604

    },

    {

        "meta": {

            "id": 1

        },

        "inlineStyle": {

            "width": "2px",

            "height": "100%",

            "margin": "0 auto"

        },

        "utcMS": 1737059107604

    }

]

 ---------------------------------------

My Output: 

Thanks,

Dharmesh

[IronPotato]

Hi @Dharmesh Desai ,

I recommend to watch these 3 series of You and I Build on Youtube. I hope that they will help you with you query.

They are all about Calendar Component.

https://www.youtube.com/watch?v=cGrj_NuyAX0

https://www.youtube.com/watch?v=hzLjmo577Ro&t=225s

https://www.youtube.com/watch?v=p6mWrFEmpC0&t=420s

If my answer helped you in any way, please then mark it as helpful or correct. This will help others finding a solution.

[Dharmesh Desai]

Hi @IronPotato, thanks for the resource links but they did not cover the calendar component's timeline section. 

Dharmesh