Skip to content

Commit

Permalink
Merge pull request #13 from BruderJohn/WeekView
Browse files Browse the repository at this point in the history 
Feat: Added WeekView
  • Loading branch information
@tossnet
tossnet authored Sep 20, 2023
2 parents 52c1096 + 48375d1 commit fffe11a
Show file tree
Hide file tree
Showing 14 changed files with 671 additions and 190 deletions.
3 changes: 2 additions & 1 deletion BlazorCalendar/Models/Enums.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ public enum PriorityLabel
public enum DisplayedView
{
Annual = 0,
Monthly = 1
Monthly = 1,
Weekly = 2
}

public enum FillStyleEnum
Expand Down
82 changes: 82 additions & 0 deletions BlazorCalendar/WeekView.razor
View file
Original file line number Diff line number Diff line change
@@ -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>
98 changes: 98 additions & 0 deletions BlazorCalendar/WeekView.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -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}";
}
}
31 changes: 31 additions & 0 deletions BlazorCalendar/WeekView.razor.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
98 changes: 98 additions & 0 deletions samples/BlazorServer/Pages/Annualy.razor
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit fffe11a

Please sign in to comment.