Days marking in TimeLine

UI Components for JSF
Post Reply
jiny10
Posts: 13
Joined: 25 May 2020, 20:33

28 Jun 2022, 08:44

Hello, it is some way how to mark with different color any day in TimeLine, for example I want to mark all holidays and weekends like on the picture Image.

Code: Select all

                <p:timeline id="schedule"
                            var="scheduleUnit"
                            widgetVar="timelineWdgt"
                            value="#{scheduleBean.loadAllScheduleList()}"
                            locale="lv"
                            verticalScroll="true"
                            horizontalScroll="true"
                            editable="true"
                            orientationAxis="both"
                            eventMargin="2"
                            eventMarginAxis="0"
                            zoomMin="#{1000 * 60 * 60 * 24 * 10}"
                            start="#{scheduleBean.start}"
                            end="#{scheduleBean.end}"
                            stackEvents="false">
                    <p:ajax event="add" listener="#{scheduleBean.onAdd}" update="schedule"/>

                    <h:outputText value="#{scheduleUnit.asName()}"/>

         
                    <f:facet name="menu">
                        <p:commandButton type="button" icon="pi pi-chevron-left" styleClass="p-ml-2"
                                         onclick="PF('timelineWdgt').move(-0.3);"/>
                        <p:commandButton type="button" icon="pi pi-chevron-right" styleClass="p-ml-2"
                                         onclick="PF('timelineWdgt').move(0.3);"/>
                        <p:commandButton type="button" icon="pi pi-search-minus" styleClass="p-ml-2"
                                         onclick="PF('timelineWdgt').zoom(-0.5);"/>
                        <p:commandButton type="button" icon="pi pi-search-plus" styleClass="p-ml-2"
                                         onclick="PF('timelineWdgt').zoom(0.5);"/>
                    </f:facet>

                </p:timeline>

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

29 Jun 2022, 14:07

Yep see this vis timeline example...

https://visjs.github.io/vis-timeline/ex ... table.html
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

jiny10
Posts: 13
Joined: 25 May 2020, 20:33

29 Jun 2022, 15:23

Melloware wrote:
29 Jun 2022, 14:07
Yep see this vis timeline example...

https://visjs.github.io/vis-timeline/ex ... table.html
Sorry, but I cannot understand how to do it? I just see the result, but I do not see the code. What I have to use in PrimeFaces to reach such result?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

29 Jun 2022, 15:44

You have to do view source on that HTML to see their configs. That is a raw vis-timeline example then you need to figure out how to do the same thing with PF timeline.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests