I am going to try to use Flatpickr Calendar for our simple viewable "Availability Calendar". I will need to make a separate hidden html page that is excluded from the "robot.txt" for adding and removing "date ranges" the page will be named DateRangeEntry.html . This page will have an entry for creating addition date ranges and an entry for removing or adjusting existing date ranges. That is all.
I would like to have a set login required to gain access to this page to prevent incidental hackers. UserName and Password could be stored anywhere necessary & hard coded with permissions set properly. This could also use PHP, perl if necessary. Are there any suggestions for any easy login script?
I guess flatpickr isn't going to get me there without a lot of work, because it really doesn't seem to have the ability to store the availability dates. I would need to create that.
So after looking further, I am going back to an earlier one I was interested in.
http://www.bootstrap-year-calendar.com/
Which has a responsive yearly calendar which reduces to be one month wide on a cell phone, and has the simple inputs we need.
Somehow I'll have to disable the editing functions for user just to View the calendar, and then have a separate hidden page with the functions to add and delete date ranges, and to set the min/max dates.
bootstrap-year-calendar seems to have a bootstrap-calendar.d.ts file with
Type Definitions and a reference path<br />
/// <reference path="../jquery/jquery.d.ts"/>
I don't know where this should be located. I've put the css file under the CSS directory and the js file under JS directory.
It seems that the bootstrap calendar is using jquery and there are certain steps I need to take to get it installed and recognized.
See Typescript — Integrate jQuery Plugin in your Project
https://medium.com/@NetanelBasal/typescript-integrate-jquery-plugin-in-your-project-e28c6887d8dc
It appears that npm (which looks like a package installer, sort of like NSIS) is used. I'm already in unknown territory here. Not sure this is going to work out.
Well, the first steps are easier than expected. First download the js & css files and the type definitions file *.t.ds Then import the css file into your CSS directory in BSS and import the js file into the JS directory. I have not yet imported the bootstrap-calendar.t.ds file because I have no idea where it should be located.
Then I made a new page in BSS, then updated to BSS to 2.6.1. I then looked at the HTML for the page, and it appears that the head is similar to my first page and includes all the css files and the js is included at the bottom, including the two files for bootstrap-calendar. I don't need to touch anything.
Now in the <Body> I tried adding a <Container> Component, then <Custom Code> Then I right clicked on Custom Code and picked Edit, an edit window popped up on the right. Into that I pasted the div version shown here http://www.bootstrap-year-calendar.com/#Documentation/Usage
<body>
<container>
<div data-provide="calendar">
</div>
<container>
</body>
Then saved it, and the page still looked blank, so I decided to Preview, and there was the entire Yearly Calendar, which was site responsive, and will scroll left and right to change the year. In mobile mode is shrinks down to one month wide, and has a scroll bar. We'll see how that works later. It's been pretty straight forward so far.
The cursor highlights dates with a grey box as you move the cursor around the calendar, but that's it so far.
Well, the next steps are not so readily figured out. I've tried a dozen ways to get it working so that it works like this page. http://www.bootstrap-year-calendar.com/#Examples/Full%20example
Here is what the Dates.html page looks like now.
http://crimson-paper-3666.bss.design/dates.html