Feat: Added WeekView

BlazorCalendar/Models/Enums.cs

@@ -11,7 +11,8 @@ public enum PriorityLabel
 public enum DisplayedView
 {
     Annual = 0,
-    Monthly = 1
+    Monthly = 1,
+    Weekly = 2
 }
 
 public enum FillStyleEnum

BlazorCalendar/WeekView.razor

@@ -0,0 +1,82 @@
+@using System.Globalization
+@using BlazorCalendar.Models
+@using BlazorCalendar.Styles
+
+@inherits CalendarBase
+
+@{
+    DateTime FirstDateWeek = new DateTime(FirstDate.Year, FirstDate.Month, FirstDate.Day).AddDays(-(Dates.GetNumOfDay((int)FirstDate.Date.DayOfWeek) - 2));
+
+    string? isHidden = DisplayedView == DisplayedView.Weekly ? null : "hidden-element";
+    string? CSSbackground = null;
+    string? taskColor = null;
+    string? classPin = null;
+    string? classPointer = null;
+
+    // The sorting must be done each time we redraw in case the user moves the spots
+    if (TasksList != null)
+    {
+        TasksList = TasksList.OrderBy(x => x.DateStart)
+                             .ThenByDescending(x => x.DateEnd).ToArray();
+    }
+}
+
+<div class=@($"{isHidden} weekly-calendar") style="@Style">
+
+    @for (var i = 0; i < 7; i++)
+    {
+        DateTime day = FirstDateWeek.AddDays(i);
+
+        <div class="day-column" style="grid-column-start: @(i+1)">
+            @{
+                CSSbackground = GetBackground(day);
+            }
+            <div class="day-header header-name noselect" style="@HeaderStyle @CSSbackground">
+                @day.ToString("dddd dd.MM")
+            </div>
+
+            <div class="hours">
+
+                @for (var hour = 0; hour < 24; hour++)
+                {
+                    DateTime hours = day.AddHours(hour);
+
+                    <div class="hour day-cellule" ondragover="event.preventDefault();" @ondrop:preventDefault="true" @ondrop="() => HandleDayOnDrop(hours)">
+                        @hours.ToString("HH:mm")
+                    </div>
+
+                    @if (TasksList != null)
+                    {
+                        int column = 1;
+
+                        for (var k = 0; k < TasksList.Length; k++)
+                        {
+                            Tasks t = TasksList[k];
+
+                            if (t.DateEnd > hours && t.DateStart <= hours)
+                            {
+                                column++;
+
+                                taskColor = Colors.GetHatching(t.FillStyle, t.Color);
+                                taskColor = $"{taskColor};color:{t.ForeColor}";
+
+                                classPin = string.IsNullOrWhiteSpace(t.Comment) ? null : " pin";
+                                classPointer = " cursor-pointer";
+
+                                <div class="@($"hour-task {classPin}{classPointer}")" style="grid-column-start: @column; @taskColor"
+                                     draggable="@Draggable.ToString()" @ondragstart="() => HandleDragStart(t.ID)">
+                                    @t.Code
+                                </div>
+
+                            }
+                        }
+                    }
+
+                }
+            </div>
+
+        </div>
+
+    }
+
+</div>

BlazorCalendar/WeekView.razor.cs

@@ -0,0 +1,98 @@
+namespace BlazorCalendar;
+
+using BlazorCalendar.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+partial class WeekView : CalendarBase
+{
+    [CascadingParameter(Name = "SelectedView")]
+    public DisplayedView DisplayedView { get; set; } = DisplayedView.Weekly;
+
+    private DateTime _firstdate;
+    [CascadingParameter(Name = "FirstDate")]
+    public DateTime FirstDate
+    {
+        get
+        {
+            if (_firstdate == DateTime.MinValue) _firstdate = DateTime.Today;
+            return _firstdate.Date;
+        }
+        set
+        {
+            _firstdate = value;
+        }
+    }
+
+    [CascadingParameter(Name = "TasksList")]
+    public Tasks[]? TasksList { get; set; }
+
+    [Parameter]
+    public PriorityLabel PriorityDisplay { get; set; } = PriorityLabel.Code;
+
+    [Parameter]
+    public bool HighlightToday { get; set; } = false;
+
+    [Parameter]
+    public EventCallback<int> OutsideCurrentMonthClick { get; set; }
+
+    [Parameter]
+    public EventCallback<ClickEmptyDayParameter> DayClick { get; set; }
+
+    [Parameter]
+    public EventCallback<ClickTaskParameter> TaskClick { get; set; }
+
+    [Parameter]
+    public EventCallback<DragDropParameter> DragStart { get; set; }
+
+    [Parameter]
+    public EventCallback<DragDropParameter> DropTask { get; set; }
+
+    private Tasks? TaskDragged;
+    private async Task HandleDragStart(int taskID)
+    {
+        TaskDragged = new Tasks()
+        {
+            ID = taskID
+        };
+
+        DragDropParameter dragDropParameter = new()
+        {
+            taskID = TaskDragged.ID
+        };
+
+        await DragStart.InvokeAsync(dragDropParameter);
+    }
+
+    private async Task HandleDayOnDrop(DateTime day)
+    {
+        if (!Draggable) return;
+        if (TaskDragged == null) return;
+
+        DragDropParameter dragDropParameter = new()
+        {
+            Day = day,
+            taskID = TaskDragged.ID
+        };
+
+        await DropTask.InvokeAsync(dragDropParameter);
+
+        TaskDragged = null;
+    }
+
+    private string GetBackground(DateTime day)
+    {
+        int d = (int)day.DayOfWeek;
+
+        if (d == 6)
+        {
+            return $"background:{SaturdayColor}";
+        }
+        else if (d == 0)
+        {
+            return $"background:{SundayColor}";
+        }
+
+        return $"background:{WeekDaysColor}";
+    }
+}

BlazorCalendar/WeekView.razor.css

@@ -0,0 +1,31 @@
+.weekly-calendar {
+    display: grid;
+    width: 100%;
+    overflow: auto;
+}
+
+.day-column {
+    display: flex;
+    flex-flow: column;
+}
+
+.day-header {
+    grid-area: 1 / 1 / span 1 / span 2;
+}
+
+.hours {
+    border: 1px solid #c6c6c6;
+    flex: 1;
+    display: grid;
+    justify-content: stretch;
+}
+
+.hour {
+    grid-column-start: 1;
+    font-size: 1em;
+    padding-left: 0.5em;
+}
+
+.hour-task {
+    text-align: center;
+}

samples/BlazorServer/Pages/Annualy.razor

@@ -0,0 +1,98 @@
+@page "/annualyview"
+@using BlazorCalendar
+@using BlazorCalendar.Models
+
+
+<PageTitle>Blazor Calendar Samples</PageTitle>
+
+<div class="d-flex flex-row mb-2">
+	<button type="button" @onclick="@(m => ClicMonthNavigate(-1))" class="btn">◀️</button>
+	<button type="button" @onclick="@(m => ClicMonthNavigate(1))" class="btn me-2">▶️</button>
+	<input type="date" class="me-2" value="@(today.ToString("yyyy-MM-dd"))" @onchange="@(e => ChangeFirstDate(e.Value.ToString()))" />
+	<input type="number" class="me-2" min="1" @bind-value="months">
+	<select @bind="@PriorityDisplay" class="me-2">
+		<option value="@PriorityLabel.Code" selected>priority Code</option>
+		<option value="@PriorityLabel.Caption">priority Caption</option>
+	</select>
+	<div>
+		<input type="checkbox" @bind="draggable" id="is-draggable" />
+		<label for="is-draggable">Draggable</label>
+	</div>
+</div>
+
+
+<CalendarContainer FirstDate="today" TasksList="TasksList.ToArray()" DisplayedView="DisplayedView.Annual">
+	<AnnualView Months="months" Style="height:80vh"
+				PriorityDisplay="@PriorityDisplay"
+				HeaderClick="HeaderClick"
+				TaskClick="TaskClick" EmptyDayClick="EmptyDayClick"
+				Draggable="@draggable" DragStart="DragStart" DropTask="DropTask" />
+</CalendarContainer>
+
+
+<br />
+<div class="console">@fakeConsole</div>
+
+@code {
+	private DateTime today = DateTime.Today;
+	private int months = 12;
+	private List<Tasks> TasksList;
+	private string fakeConsole = "";
+	private BlazorCalendar.PriorityLabel PriorityDisplay = PriorityLabel.Code;
+	private bool draggable = true;
+
+	protected override void OnInitialized()
+	{
+		TasksList = new()
+		{
+			new Tasks { ID = 1, DateStart = today.AddDays(8), DateEnd = today.AddDays(8), Code = "CP", Color = "#19C319", Caption = "Lorem ipsum dolor sit amet", FillStyle=BlazorCalendar.FillStyleEnum.CrossDots },
+			new Tasks { ID = 2, DateStart = today.AddDays(50), DateEnd = today.AddDays(52), Code = "DEV", Color = "#FFD800", Comment="on Teams template", Caption = "Fusce quis purus eu ante", FillStyle=BlazorCalendar.FillStyleEnum.ZigZag },
+			new Tasks { ID = 3, DateStart = today.AddDays(40), DateEnd = today.AddDays(41), Code = "FORM", Color = "#FFC3FF", ForeColor = "#FF0000", Caption = "Lorem ipsum dolor sit amet" },
+			new Tasks { ID = 4, DateStart = today.AddDays(62), DateEnd = today.AddDays(62), Code = "DEV", Color = "#FFD800" },
+			new Tasks { ID = 5, DateStart = today.AddDays(62), DateEnd = today.AddDays(62), Code = "FORM", Color = "#FFC3FF", Caption = "Ut sit amet turpis eget" } ,
+			new Tasks { ID = 6, DateStart = today.AddDays(73).AddHours(8), DateEnd = today.AddDays(73).AddHours(9), Code = "MEETING", Color = "#2DD7D7", Comment="Julien's test" }
+		};
+	}
+
+	private void ChangeFirstDate(string value)
+	{
+		if (string.IsNullOrEmpty(value)) return;
+		today = DateTime.Parse(value.ToString());
+	}
+
+	private void ClicMonthNavigate(int monthToAdd)
+	{
+		today = today.AddMonths(monthToAdd);
+	}
+
+	private void HeaderClick(DateTime month)
+	{
+		fakeConsole = "HeaderClick :" + month.ToString("MMM yyyy");
+	}
+
+	private void TaskClick(ClickTaskParameter clickTaskParameter)
+	{
+		fakeConsole = "ID task(s) :" + string.Join(", ", clickTaskParameter.IDList);
+	}
+
+	private void EmptyDayClick(ClickEmptyDayParameter clickEmptyDayParameter)
+	{
+		fakeConsole = "Empty day :" + clickEmptyDayParameter.Day.ToShortDateString();
+	}
+
+	private void DragStart(DragDropParameter dragDropParameter)
+	{
+		fakeConsole = $"DragStart event :{dragDropParameter.Day.ToShortDateString()} {dragDropParameter.taskID}";
+	}
+
+	private void DropTask(DragDropParameter dragDropParameter)
+	{
+		fakeConsole = $"DropTask event :{dragDropParameter.Day.ToShortDateString()} {dragDropParameter.taskID}";
+
+		Tasks taskDropped = TasksList.FirstOrDefault(t => t.ID == dragDropParameter.taskID);
+
+		var TotalDay = (taskDropped.DateEnd - taskDropped.DateStart).TotalDays;
+		taskDropped.DateEnd = dragDropParameter.Day.AddDays(TotalDay);
+		taskDropped.DateStart = dragDropParameter.Day;
+	}
+}