Merge pull request #66 from Lewan24/main

Add setting custom classes and styles to appointments

BlazorScheduler/Components/Appointment.cs

@@ -17,6 +17,8 @@ public partial class Appointment : ComponentBase, IDisposable
         [Parameter] public DateTime Start { get; set; }
         [Parameter] public DateTime End { get; set; }
         [Parameter] public string? Color { get; set; }
+        [Parameter] public string? Class { get; set; }
+        [Parameter] public string? Style { get; set; }
 
         private bool _isVisible = true;
         public bool IsVisible

BlazorScheduler/Components/Scheduler.razor

@@ -76,7 +76,7 @@
             @foreach (var week in GetDaysInRange().Chunk(7))
             {
                 var (start, end) = (week.First(), week.Last());
-                <SchedulerWeek Start="start" End="end" Appointments="GetAppointmentsInRange(start, end)" @key="week" />
+                <SchedulerWeek Start="start" End="end" Appointments="GetAppointmentsInRange(start, end)" @key="week"/>
             }
         </CascadingValue>
     </div>

BlazorScheduler/Components/Scheduler.razor.cs

@@ -15,7 +15,10 @@ public partial class Scheduler : IAsyncDisposable
         [Parameter] public RenderFragment Appointments { get; set; } = null!;
         [Parameter] public RenderFragment<Scheduler>? HeaderTemplate { get; set; }
         [Parameter] public RenderFragment<DateTime>? DayTemplate { get; set; }
-
+        [Parameter] public string? RootDaysGroupInWeekStyle { get; set; }
+        [Parameter] public string? RootAppointmentOverflowStyle { get; set; }
+        [Parameter] public string? RootDayClass { get; set; }
+        [Parameter] public string? RootDayStyle { get; set; }
         [Parameter] public Func<DateTime, DateTime, Task>? OnRequestNewData { get; set; }
         [Parameter] public Func<DateTime, DateTime, Task>? OnAddingNewAppointment { get; set; }
         [Parameter] public Func<DateTime, Task>? OnOverflowAppointmentClick { get; set; }

BlazorScheduler/Internal/Components/SchedulerAllDayAppointment.razor

@@ -1,7 +1,7 @@
 @namespace BlazorScheduler.Internal.Components
 
-<div class="appointment @Classes.AsString()"
-    style="--start: @Start; --end: @End; --order: @Order; background-color: @Appointment.Color;"
+<div class="appointment @Classes.AsString() @Appointment.Class"
+    style="--start: @Start; --end: @End; --order: @Order; background-color: @Appointment.Color; @Appointment.Style"
     @onmousedown="OnMouseDown" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
     @Appointment.RenderChildContent()
 </div>

BlazorScheduler/Internal/Components/SchedulerAppointment.razor

@@ -1,6 +1,6 @@
 @namespace BlazorScheduler.Internal.Components
 
-<div class="appointment appointment-timed @Classes.AsString()" style="--start: @Start; --order: @Order;" @onmousedown="OnMouseDown" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
+<div class="appointment appointment-timed @Classes.AsString() @Appointment.Class" style="--start: @Start; --order: @Order; @Appointment.Style" @onmousedown="OnMouseDown" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
     <span class="dot" style="background-color: @Appointment.Color;"></span>
     @Appointment.RenderChildContent()
 </div>

BlazorScheduler/Internal/Components/SchedulerAppointmentOverflow.razor

@@ -1,5 +1,5 @@
 @namespace BlazorScheduler.Internal.Components
 
-<div class="appointment" style="--start: @Start; --end: @Start; --order: @Order;" @onclick="e => Task.FromResult(Scheduler.OnOverflowAppointmentClick?.Invoke(Day))">
+<div class="appointment" style="--start: @Start; --end: @Start; --order: @Order; @Style" @onclick="e => Task.FromResult(Scheduler.OnOverflowAppointmentClick?.Invoke(Day))">
     @Scheduler.PlusOthersText.Replace("{n}", AppointmentCount.ToString())
 </div>

BlazorScheduler/Internal/Components/SchedulerAppointmentOverflow.razor.cs

@@ -11,5 +11,6 @@ public partial class SchedulerAppointmentOverflow
 		[Parameter] public int AppointmentCount { get; set;}
 		[Parameter] public int Start { get; set; }
 		[Parameter] public int Order { get; set; }
+		[Parameter] public string? Style { get; set; }
 	}
 }

BlazorScheduler/Internal/Components/SchedulerDay.razor

@@ -1,6 +1,6 @@
 @namespace BlazorScheduler.Internal.Components
 
-<div class="day @Classes.AsString()" @onmousedown="OnMouseDown" data-date="@Day.Date.ToString("yyyyMMdd")">
+<div class="day @Classes.AsString() @Scheduler.RootDayClass" style="@Scheduler.RootDayStyle" @onmousedown="OnMouseDown" data-date="@Day.Date.ToString("yyyyMMdd")">
     @if (Scheduler.DayTemplate != null)
     {
         @Scheduler.DayTemplate(Day)

BlazorScheduler/Internal/Components/SchedulerWeek.razor

@@ -1,10 +1,10 @@
 @namespace BlazorScheduler.Internal.Components
 
 <div class="week">
-    <div class="days" style="--maxAppointments: @MaxVisibleAppointmentsThisWeek">
+    <div class="days" style="--maxAppointments: @MaxVisibleAppointmentsThisWeek; @Scheduler.RootDaysGroupInWeekStyle">
         @for (var dt = Start; dt <= End; dt = dt.AddDays(1))
         {
-            <SchedulerDay Day="dt" @key="dt" />
+            <SchedulerDay Day="dt" @key="dt"/>
         }
     </div>
 
@@ -39,7 +39,7 @@
                     AppointmentCount="numOverFlowAppointments"
                     Start="(dt.DayOfWeek - Scheduler.StartDayOfWeek + 7) % 7"
                     Order="MaxNumOfAppointmentsPerDay"
-                    @key="dt" />
+                    @key="dt" Style="@Scheduler.RootAppointmentOverflowStyle" />
             }
         }
     </div>

BlazorScheduler/wwwroot/css/styles.css

@@ -65,7 +65,7 @@
 .scheduler > .month > .week > .days {
     display: flex;
     justify-content: space-around;
-    height: max(8.313rem, calc(1.5rem + 5px + 8px + var(--maxAppointments) * 1.2rem));
+    height: max(8.313rem, calc(1.5rem + 5px + 8px + var(--maxAppointments) * 1.5rem));
 }
 
 .scheduler > .month > .week.header {
@@ -120,12 +120,12 @@
 .scheduler > .month > .week > .appointments > .appointment {
     position: absolute;
     left: calc(var(--start) / 7 * 100%);
-    top: max(10px, calc(15px + (var(--order) * 1.2rem)));
+    top: max(10px, calc(15px + (var(--order) * 1.5rem)));
     border-radius: 2px;
     margin-left: 2px;
     width: calc((var(--end) - var(--start) + 1) / 7 * 100% - 4px);
     padding-left: 4px;
-    font-size: .75rem;
+    font-size: .95rem;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

DemoApp/AppointmentService.cs

@@ -15,7 +15,7 @@ public IEnumerable<AppointmentDto> GetAppointments(DateTime start, DateTime end)
 
         private readonly List<AppointmentDto> AllAppointments = new()
         {
-            new AppointmentDto { Title = "Hello 1", Start = DateTime.Now, End = DateTime.Now.AddHours(1), Color = "yellow" },
+            new AppointmentDto { Title = "Hello 1", Start = DateTime.Now, End = DateTime.Now.AddHours(1), Color = "yellow", Class = "bg-dark text-white"},
             new AppointmentDto { Title = "Hello 2", Start = DateTime.Now.AddDays(3), End = DateTime.Now.AddDays(3).AddHours(1), Color = "red" },
 
             new AppointmentDto { Title = "Hello 3", Start = DateTime.Today, End = DateTime.Today.AddDays(1), Color = "yellow" },

DemoApp/Models/AppointmentDto.cs

@@ -8,5 +8,6 @@ public class AppointmentDto
         public DateTime Start { get; set; }
         public DateTime End { get; set; }
         public string Color { get; set; }
+        public string? Class { get; set; }
     }
 }

DemoApp/Pages/Basic.razor

@@ -5,7 +5,7 @@
     <Appointments>
         @foreach (var app in _appointments)
         {
-            <Appointment Start="@app.Start" End="@app.End" Color="@app.Color" OnReschedule="(start, end) => HandleReschedule(app, start, end)">
+            <Appointment Start="@app.Start" End="@app.End" Color="@app.Color" OnReschedule="(start, end) => HandleReschedule(app, start, end)" Class="@app.Class">
                 @app.Title
                 @if (context.IsTimed)
                 {

DemoApp/Pages/Configuration.razor

@@ -43,6 +43,24 @@
             <MudItem xs="12" md="6">
                 <MudTextField @bind-Value="_newAppointmentText" Label="New Appointment Text" />
             </MudItem>
+            <MudItem xs="12" md="6">
+                <MudTextField @bind-Value="_classes" Label="Classes (set to every appointment) (eg. could be bootstrap if installed)" />
+            </MudItem>
+            <MudItem xs="12" md="6">
+                <MudTextField @bind-Value="_styles" Label="Custom style (set to every appointment)" />
+            </MudItem>
+            <MudItem xs="12" md="6">
+                <MudTextField @bind-Value="_rootDaysGroupInWeekStyles" Label="Custom style (add to global days group style)" />
+            </MudItem>
+            <MudItem xs="12" md="6">
+                <MudTextField @bind-Value="_rootAppointmentOverflowStyle" Label="Custom style for overflow appointment (+{n} ...)" />
+            </MudItem>
+            <MudItem xs="12" md="6">
+                <MudTextField @bind-Value="_rootDayClass" Label="Classes for root every day in weeks (eg. could be bootstrap if installed)" />
+            </MudItem>
+            <MudItem xs="12" md="6">
+                <MudTextField @bind-Value="_rootDayStyle" Label="Custom style for every day in week" />
+            </MudItem>
             <MudItem xs="12" md="6">
                 <MudButton OnClick="AddAppointments" Variant="Variant.Filled" Color="Color.Primary">Add appointments</MudButton>
                 <MudButton OnClick="ClearAppointments" Variant="Variant.Filled" Color="Color.Error">Clear appointments</MudButton>
@@ -63,11 +81,14 @@
     TodayButtonText="@_todayButtonText"
     PlusOthersText="@_plusOthersText"
     NewAppointmentText="@_newAppointmentText"
-    EnableAppointmentsCreationFromScheduler="@_enableAppCreationFromScheduler">
+    EnableAppointmentsCreationFromScheduler="@_enableAppCreationFromScheduler" 
+    RootDaysGroupInWeekStyle="@_rootDaysGroupInWeekStyles" 
+    RootAppointmentOverflowStyle="@_rootAppointmentOverflowStyle" 
+    RootDayClass="@_rootDayClass" RootDayStyle="@_rootDayStyle">
     <Appointments>
         @foreach (var app in _appointments)
         {
-            <Appointment Start="@app.Start" End="@app.End" Color="@app.Color" OnReschedule="(start, end) => HandleReschedule(app, start, end)">
+            <Appointment Start="@app.Start" End="@app.End" Color="@app.Color" OnReschedule="(start, end) => HandleReschedule(app, start, end)" Class="@_classes" Style="@_styles">
                 @app.Title
             </Appointment>
         }
@@ -89,7 +110,14 @@
     private string _todayButtonText = "Today";
     private string _plusOthersText = "+ {n} others";
     private string _newAppointmentText = "New Appointment";
-
+
+    private string _classes = "";
+    private string _styles = "";
+    private string _rootDaysGroupInWeekStyles = "";
+    private string _rootAppointmentOverflowStyle = "";
+    private string _rootDayClass = "";
+    private string _rootDayStyle = "";
+
     Task OnAddingNewAppointment(DateTime start, DateTime end)
     {
         _appointments.Add(new AppointmentDto { Start = start, End = end, Title = "A newly added appointment!", Color = "aqua" });