procedure TCSSCalendar.Changed;
var
Node: THtmlNode;
I, X: Integer;
DayLoop,
FirstDay: TDateTime;
W,
AYear, AMonth, ADay,
Year, Month, Day: Word;
Style: String;
fs: TFormatSettings;
begin
// date time calculations
DecodeDate(FActiveDay, AYear, AMonth, ADay);
FirstDay := EncodeDate(AYear, AMonth, 1);
FirstDay := IncDay(FirstDay, - DayOfWeek(FirstDay) +1);
w := WeekOfTheYear(FirstDay);
fs := DefaultFormatSettings;
// build top navigation section: Month Year < >
Body.InlineStyle := 'width:400px; background-color: white;margin:10px;padding:5px;';
Body.Clear;
Node := HTMLDiv('display:flex;color:#808080;', '');
Node.AddNode( HTMLDiv('flex-grow:1;padding:5px;')
.AddNode( HTMLSpan('font:18px;font-weight:bold;color:black;', fs.LongMonthNames[AMonth] ))
.AddNode( HTMLSpan('font:18px;color:#F0403C;margin-left:5px;', AYear.ToString))
);
Node.AddNode( HTMLFa('font:12px;padding:5px;cursor:pointer;', 'f053').SetOnClick(@GoPrevMonth).SetHover('color:#2AAEF5;')); // prev month button
Node.AddNode( HTMLFa('font:12px;padding:5px;cursor:pointer;', 'f054').SetOnClick(@GoNextMonth).SetHover('color:#2AAEF5;')); // next month button
Body.AddNode(Node);
// build day names header
Node := HTMLDiv('display:flex;font-weight:bold;color:#999999;', '');
Node.AddNode( HTMLSpan('width:50px;', 'CW'));
for X := 0 to 6 do
Node.AddNode( HTMLSpan('flex-grow:1;margin:2px auto;', AnsiUpperCase(fs.ShortDayNames[DayOfWeek( IncDay(FirstDay,X))])));
Body.AddNode(Node);
DayLoop := FirstDay;
// build week rows
for I := 0 to 5 do begin
Node := HTMLDiv('display:flex;', '').SetHover('background-color:#F2F2F2;border-radius:8px;color:#2AAEF5;');
Node.AddNode( HTMLSpan('width:30px;color:#999999;font-weight:bold;padding:5px;margin-right:5px;border-right:2px solid #E5E5E5;', (w + I).ToString));
// build days in columns
for X := 0 to 6 do begin
DecodeDate(DayLoop, Year, Month, Day);
Style := 'font:13px;color:black;flex-grow:1;';
if Month <> AMonth then Style := Style + 'color:#E5E5E5;'; // make days from different month less visible
Node.AddNode( HTMLSpan(Style, AddChar('0',(Day).ToString, 2)).SetHover('background-color:#2AAEF5;color:white;border-radius:5px;cursor:pointer;'));
DayLoop := IncDay(DayLoop);
end;
Body.AddNode(Node);
end;
InvalidatePreferredSize;
AdjustSize;
Invalidate;
end;
procedure TCSSCalendar.GoNextMonth(Sender: TObject);
begin
FActiveDay := IncMonth(FActiveDay, 1);
Changed;
end;
procedure TCSSCalendar.GoPrevMonth(Sender: TObject);
begin
FActiveDay := IncMonth(FActiveDay, -1);
Changed;
end;
constructor TCSSCalendar.Create(AOwner: TComponent);
begin
inherited Create(AOwner);
FActiveDay := Now;
FActiveMonth := Now;
Changed;
end;