JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdn.cfront-cloud.co.uk/scripts/7/cf.app.linq.js?_=175"></script>
<div data-bind="simpleCalendar: { dates: Dates, start: { dt: '2023-02-10' }, formats: { monthName: 'MMM' } }">

</div>

CSS

.cfaf-simple-calendar-container {
  width: 400px;
  height: 300px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.cfaf-simple-calendar .day { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.cfaf-simple-calendar .day.oor { background: none !important }
.cfaf-simple-calendar .day.oor .label { opacity: 0 }
.cfaf-simple-calendar .day.has-events { background: #aaddff }

JavaScript

(typeof (cFAF) == 'undefined') && (cFAF = {});

if (typeof (moment) != 'undefined' && typeof (moment.prototype.fluentAdd) == 'undefined')
{
    Object.defineProperty(moment.prototype, 'fluentAdd', {
        value: function(n, u)
        {
            var res = this.clone();
            res.add(n, u);

            return res;
        }
    });
}

moment.updateLocale('en', {
    week: {
        dow: 1
    }
});

// ==========================================================================================================================================================================
cFAF.SimpleCalendarEventModel = function()
{
    this.Text = ko.observable();
    this.Title = ko.observable();
    this.Color = ko.observable();
    this.CssClass = ko.observable();

    this.From = { dt: ko.observable() };
    this.To = { dt: ko.observable() };
    this.HasTimes = ko.observable();
};

cFAF.SimpleCalendarComponent = function()
{
    var _this = this;
    var _inupdate = false;
    var _source;
    var _handlers;

    this.Start = { dt: ko.observable() };
    this.End = { dt: ko.observable() };
    this.NumberOfWeeks = ko.observable(6);

    this.Weeks = ko.observableArray();
    this.Events = ko.observableArray();
    
    this.formats = {
                	date: 'Do',
                  dayName: 'dddd',
                  monthName: 'MMMM',
                  dateNumeric: 'dd'
                };

    this.ActualStart = ko.computed(
        function()
        {
            var mom = moment(_this.Start.dt());
            mom.startOf('week');

            return { dt: ko.observable(mom.format('YYYY-MM-DD')) };
        }
    );

    this.ActualEnd = ko.computed(
        function()
        {
            var mom = moment(_this.End.dt());
            mom.endOf('week');

            return { dt: ko.observable(mom.format('YYYY-MM-DD')) };
        }
    );

    this.Start.dt.subscribe(function() { _this.refresh(); });
    this.End.dt.subscribe(function() { _this.refresh(); });

   ...