diff --git a/BlazorCalendar/Models/Enums.cs b/BlazorCalendar/Models/Enums.cs index 0090c48..5b09414 100644 --- a/BlazorCalendar/Models/Enums.cs +++ b/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 diff --git a/BlazorCalendar/WeekView.razor b/BlazorCalendar/WeekView.razor new file mode 100644 index 0000000..4cbeeb9 --- /dev/null +++ b/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(); + } +} + +
+ + @for (var i = 0; i < 7; i++) + { + DateTime day = FirstDateWeek.AddDays(i); + +
+ @{ + CSSbackground = GetBackground(day); + } +
+ @day.ToString("dddd dd.MM") +
+ +
+ + @for (var hour = 0; hour < 24; hour++) + { + DateTime hours = day.AddHours(hour); + +
+ @hours.ToString("HH:mm") +
+ + @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"; + +
+ @t.Code +
+ + } + } + } + + } +
+ +
+ + } + +
diff --git a/BlazorCalendar/WeekView.razor.cs b/BlazorCalendar/WeekView.razor.cs new file mode 100644 index 0000000..13c9138 --- /dev/null +++ b/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 OutsideCurrentMonthClick { get; set; } + + [Parameter] + public EventCallback DayClick { get; set; } + + [Parameter] + public EventCallback TaskClick { get; set; } + + [Parameter] + public EventCallback DragStart { get; set; } + + [Parameter] + public EventCallback 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}"; + } +} diff --git a/BlazorCalendar/WeekView.razor.css b/BlazorCalendar/WeekView.razor.css new file mode 100644 index 0000000..d406d59 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/samples/BlazorServer/Pages/Annualy.razor b/samples/BlazorServer/Pages/Annualy.razor new file mode 100644 index 0000000..4781441 --- /dev/null +++ b/samples/BlazorServer/Pages/Annualy.razor @@ -0,0 +1,98 @@ +@page "/annualyview" +@using BlazorCalendar +@using BlazorCalendar.Models + + +Blazor Calendar Samples + +
+ + + + + +
+ + +
+
+ + + + + + + +
+
@fakeConsole
+ +@code { + private DateTime today = DateTime.Today; + private int months = 12; + private List 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; + } +} \ No newline at end of file diff --git a/samples/BlazorServer/Pages/Index.razor b/samples/BlazorServer/Pages/Index.razor index 45155fc..f56c9a2 100644 --- a/samples/BlazorServer/Pages/Index.razor +++ b/samples/BlazorServer/Pages/Index.razor @@ -1,98 +1,11 @@ @page "/" -@using BlazorCalendar -@using BlazorCalendar.Models +Blazor Calender -Blazor Calendar Samples +

Index

-
- - - - - -
- - -
-
+

This is a calender for Blazor

+@code { - - - - - -
-
@fakeConsole
- -@code{ - private DateTime today = DateTime.Today; - private int months = 12; - private List 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; - } -} \ No newline at end of file +} diff --git a/samples/BlazorServer/Pages/SwitchViews.razor b/samples/BlazorServer/Pages/SwitchViews.razor index af8f81f..7f1571e 100644 --- a/samples/BlazorServer/Pages/SwitchViews.razor +++ b/samples/BlazorServer/Pages/SwitchViews.razor @@ -6,6 +6,7 @@ @@ -13,6 +14,7 @@ + @code{ diff --git a/samples/BlazorServer/Pages/Weekly.razor b/samples/BlazorServer/Pages/Weekly.razor new file mode 100644 index 0000000..671baaf --- /dev/null +++ b/samples/BlazorServer/Pages/Weekly.razor @@ -0,0 +1,111 @@ +@page "/weeklyview" +@using BlazorCalendar +@using BlazorCalendar.Models +@using System.Globalization + +
+ + + + + +
+ + +
+
+ + + + + +
+
@fakeConsole
+ +@code { + private DateTime today = DateTime.Today; + private int months = 12; + private List TasksList; + private string fakeConsole = ""; + private BlazorCalendar.PriorityLabel PriorityDisplay = PriorityLabel.Code; + private bool draggable = true; + + protected override void OnInitialized() + { + //CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("dz-DZ"); + //CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-US"); + + TasksList = new() + { + new Tasks { ID = 0, DateStart = today.AddDays(0), DateEnd = today.AddDays(1), Code = "HELLO", Color = "#FFD800", Caption = "Lorem ipsum dolor sit amet", FillStyle = FillStyleEnum.BackwardDiagonal }, + new Tasks { ID = 1, DateStart = today.AddDays(4).AddHours(8), DateEnd = today.AddDays(4).AddHours(11), Code = "😉 CP", Color = "#19C319", Caption = "Lorem ipsum dolor sit amet" } , + new Tasks { ID = 2, DateStart = today.AddDays(-2).AddHours(8), DateEnd = today.AddDays(-2).AddHours(20), Code = "POD", Color = "#844fe7", Caption = "Podcast DevApps", FillStyle = FillStyleEnum.ZigZag } , + new Tasks { ID = 3, DateStart = today.AddHours(5), DateEnd = today.AddHours(10), Code = "CALL", Color = "#eb3c37", ForeColor = "#222", Caption = "Lorem ipsum dolor sit amet", FillStyle=FillStyleEnum.CrossDots }, + new Tasks { ID = 4, DateStart = today.AddDays(31), DateEnd = today.AddDays(31), Code = "MTG", Color = "#19C319", Caption = "MTG:France" }, + new Tasks { ID = 5, DateStart = today.AddDays(40), DateEnd = today.AddDays(42), Code = "DEV", Color = "#FFD800", Comment="on Teams template", Caption = "Fusce quis purus eu ante" }, + new Tasks { ID = 6, DateStart = today.AddDays(32), DateEnd = today.AddDays(33), Code = "MEET", Color = "#0d6efd" }, + new Tasks { ID = 7, DateStart = today.AddDays(32), DateEnd = today.AddDays(32), Code = "BLAZOR", Color = "#FFC3FF", Caption = "Blazor Dev" } , + new Tasks { ID = 8, DateStart = today.AddDays(45).AddHours(8), DateEnd = today.AddDays(45).AddHours(9), Code = "MEETING", Color = "#2DD7D7", Comment="Julien's test" }, + new Tasks { ID = 9, DateStart = today.AddDays(-8), DateEnd = today.AddDays(-7), Code = "MEET⭐", Color = "#0d6efd",Caption = "MTG:France" } + }; + } + + private void ChangeFirstDate(string value) + { + if (string.IsNullOrEmpty(value)) return; + today = DateTime.Parse(value.ToString()); + } + + private void GoToday() + { + today = DateTime.Today; + } + + private void ClicMonthNavigate(int daysToAdd) + { + today = today.AddDays(daysToAdd); + } + + private void OutsideCurrentMonthClick(int MonthAdded) + { + today = today.AddMonths(MonthAdded); + } + + private void TaskClick(ClickTaskParameter clickTaskParameter) + { + fakeConsole = "ID task(s) :" + string.Join(", ", clickTaskParameter.IDList); + } + + private void DayClick(ClickEmptyDayParameter clickEmptyDayParameter) + { + fakeConsole = "Empty day :" + clickEmptyDayParameter.Day.ToShortDateString(); + } + + private void DragStart(DragDropParameter dragDropParameter) + { + fakeConsole = $"DragStart event : {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; + } +} \ No newline at end of file diff --git a/samples/BlazorServer/Shared/NavMenu.razor b/samples/BlazorServer/Shared/NavMenu.razor index 48f88ae..7f26916 100644 --- a/samples/BlazorServer/Shared/NavMenu.razor +++ b/samples/BlazorServer/Shared/NavMenu.razor @@ -11,14 +11,24 @@