Merge pull request #3033 from syncfusion-content/EJ2-890529-timelinetemplate

890529: timeline template

Author: MahalakshmiKarthikeyan

ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/1.svg

@@ -0,0 +1,76 @@
+@Html.EJS().Gantt("Gantt").DataSource((IEnumerable < object >)ViewBag.DataSource).Height("450px").AllowSelection(true).TreeColumnIndex(1)
+    .TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress")
+        .Dependency("Predecessor").Child("SubTasks")).TimelineTemplate("#TimelineTemplates").TimelineSettings(ts => ts.TimelineUnitSize(100).TopTier(tt => tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week).Format("MMM dd, yyyy"))
+            .BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day).Count(1)))
+{
+    col.Field("TaskId").Visible(false).Add();
+    col.Field("TaskName").Width(300).Add();
+    col.Field("StartDate").Add();
+    col.Field("EndDate").Add();
+    col.Field("Duration").Add();
+    col.Field("Progress").Add();
+})
+    .LabelSettings(ls => ls.LeftLabel("TaskName"))
+    .SplitterSettings(sp => sp.ColumnIndex(1))
+    .ProjectStartDate("03/31/2024")
+    .ProjectEndDate("04/23/2024")
+    .Holidays(hol => {
+        hol.From("04/04/2019").To("04/05/2019").Label("Local Holiday").Add();
+        hol.From("04/12/2019").To("04/12/2019").Label("Public holiday").Add();
+    })
+    .Render()
+                <script type="text/x-jsrender" id="TimelineTemplates">
+                ${if(tier == 'topTier')} 
+                <div class="e-header-cell-label e-gantt-top-cell-text" style="width:100%;background-color: #FBF9F1 ;  font-weight: bold;height: 100%;display: flex; justify-content: center ; align-items: center;   "title=${date}> 
+                <div> ${value}</div>
+                <div style="width:20px; height: 20px; line-height: normal; padding-left: 10px; ">
+                <img style="width:100%; height:100%;" src =${imagedate()}   >
+                </div>
+                </div>
+                ${/if}
+                ${if(tier == 'bottomTier')} 
+                <div class="e-header-cell-label e-gantt-top-cell-text" style="width:100%;background-color: ${bgColor(value,date)}; text-align: center;height: 100%;display: flex; align-items: center;  font-weight: bold;justify-content: center   "title=${date}> 
+                 ${holidayValue(value,date)}
+                </div>
+                ${/if}
+            
+            </script>
+        
+        <script>
+            const holidayValue = (value, date) => {
+                var ganttObj = document.getElementById("Gantt").ej2_instances[0];
+                const parsedDate = new Date(date);
+                for (let i = 0; i < ganttObj.holidays.length; i++) {
+                    const holiday = ganttObj.holidays[i];
+                    const fromDate = new Date(holiday.from);
+                    const toDate = new Date(holiday.to)
+                    if (parsedDate >= fromDate && parsedDate <= toDate) {
+                        const options = { weekday: 'short' };
+                        return parsedDate.toLocaleDateString('en-US', options).toLocaleUpperCase();
+                    }
+                }
+                return value
+            }
+
+            const imagedate = () => {
+                const getImage = Math.floor(Math.random() * 5) + 1;
+                return "./image/" + getImage + ".svg";
+
+            }
+            const bgColor = (value, date) => {
+                if (value === "S") {
+                    return "#7BD3EA"
+                }
+                var ganttObj = document.getElementById("Gantt").ej2_instances[0];
+                const parsedDate = new Date(date);
+                for (let i = 0; i < ganttObj.holidays.length; i++) {
+                    const holiday = ganttObj.holidays[i];
+                    const fromDate = new Date(holiday.from);
+                    const toDate = new Date(holiday.to)
+                    if (parsedDate >= fromDate && parsedDate <= toDate) {
+                        return "#97E7E1";
+                    }
+                }
+                return "#E0FBE2"
+            };
+        </script>