Calendar - BSS or Embed Google?

Bootstrap Studio Help
1

The Trial website (actually almost finished): http://crimson-paper-3666.bss.design/ We have one empty TAB "Calendar" which I need to address. The goal is to have a calendar that can be modified from mobile or computer, to add or remove "events" with a start and end date. The Events could have a text designation that shows or not depending on a switch.

We would like to have the calendar visible from the BSS website to show the dates that have been blocked out, so that visitors to the website will see what dates are "available". The calendar does not have to be changed from the BSS website, but it does have to be accessible to us, the owners to block out dates and remove blockouts. I would be good to have the "text" designation for an Event "block" show to us. If this owner control feature were in a BSS calendar, we would need a login.

There are perhaps a couple of ways of doing this.

  1. Angular Bootstrap Calendar on github https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/README.md
  2. Using Google Calendar embedded, with owner access from our google account.
  3. Recreating Google Calendar in Bootstrap https://www.youtube.com/watch?v=y6PkEGnN0VM This actually tries to recreate google calendar. It has hours, we just need days. It has a login and includes holidays. Htlm and Css is available.7.
  4. https://profromgo.com/blog/google-calendar-responsive/
  5. https://codepen.io/profstein/pen/ozrbPJ
  6. https://answers.squarespace.com/questions/54774/how-to-embed-a-google-calendar-in-a-responsive-way.htm
    1. Custom Components - perhaps there is one somewhere that is shared that would solve this.
    2. A friend who uses BSS3 who got me using BSS suggested this calendar. https://eonasdan.github.io/bootstrap-datetimepicker/ saying I could also search Google "Bootstrap Calendar" or "Boostrap Date Picker"

There are a lot of choices here, and some will be more work than others. Embedding a Google Calendar has some real advantages if it can be done easily.

Any suggestions would be appreciated. The TAB calendar can be a very simple month style with the days shaded when the house is occupied or rented. It is just for viewing. We would have to login somehow to add or remove Events.

PS: Here is another pure BSS one that shows a full month. It allows "feeding" events to the calendar, but we would have to make a login for that. It looks good, but might be a little beyond my skills. Github Issues was touched 12 days ago but there are about 150 outstanding of 319 closed. https://github.com/Serhioromano/bootstrap-calendar

2

Some other Bootstrap Calendars http://bootsnipp.com/snippets/gv0 Gosh there is quite a choice. I have questions about login and input with some of these choices.

3

Here's a Bootstrap calendar that has good examples and I think it could work. The "Disable Days" could be the Calendar that potential customers view. http://www.bootstrap-year-calendar.com/#Examples/Disable%20days

The Full Calendar View allows picking start and end dates for an Event. http://www.bootstrap-year-calendar.com/#Examples/Full%20example

If I could configure a login for us, it would probably be a good calendar, but I'd like to make it responsive, so that it would shrink to 1 month wide going down for Mobile XS display.

What has other's experience been with this one?

4

Have you tried any of these solutions/ideas you have listed above before asking for help?

5

No, because I was trying to find the most direct path, perhaps due to someone's experience with calendars. I have found even using bootstrap, that I get myself into some dead ends. I am trying to establish a big picture approach before diving in, in hopes that it will have better results.

6

My advice is to keep it simple.

Start small and work your way up from there I can't help but think from all your posts that you are trying to run before you are walking without fully understanding what you want to do.

7

Yes, that's good sound advice. I'm definitely new to this, but I've been plugging at it hard and had some superb advice and help from Saj and Jo. http://crimson-paper-3666.bss.design/ The Calendar is the last thing left to do, and I am looking forward to getting this up on the website.

I've decided to embed the Google Calendar and see how it works.

8

I have the google embed code. Then I used this site's suggestions to make a new css file called "google-calendar-embed.css" and pasted in what is suggested here https://profromgo.com/blog/google-calendar-responsive/ The form did not look right so I changed it to follow the form required by BSS:

.responsive-iframe-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; .responsive-iframe-container iframe, .vresponsive-iframe-container object, .vresponsive-iframe-container embed position:absolute; top:0; left:0; width:100%; height:100%; }

However this line was crossed out in red. .responsive-iframe-container iframe, .vresponsive-iframe-container object, .vresponsive-iframe-container embed position:absolute;

I am thinking that it will remain crossed out until I make a container with the designation required. We'll see.

9

I've changed to https://codepen.io/profstein/pen/ozrbPJ and added those to the bottom of the same css file.

10

Well that was truely a strange experience, the first time to get into HTML and make my own is just truely weird. The developers don't really want us anywhere near it, in fact, I think they'd rather we not touch it all.

Anyway, just for chuckles I pulled a Div down into inside the OVERVIEW Container. Then did a search for HTML in the Components section. Why the dickens can't we have an HTML component that is for us? That would be really nice. Instead I am supposed to know its actually "Custom Code" oh dear, truly horrifying. Anyway, I pulled it down under the DIV then then "worked" on being able to edit it. I've forgotten what worked now, so I am going to have to try again. Anyway as calendar came up, I am not too pleased with it at XS scale but at least something worked. I see that it is a Month view. Perhaps we do one with weeks which might be smaller. I guess I don't need that old CSS in there from the https://profromgo.com/blog/google-calendar-responsive/ website, but I'll clean that up later.

How to Edit Custom Code (I suppose everyone knows this, so why write it?) You highlight the "CUSTOM CODE" in the OVERVIEW WINDOW and then just look up at the image of your website. In my case, I'd inserted the CUSTOM CODE into Tab#3, so I found that highlighted with a blue box and double clicked on it, then tried Right Click and voila you can select "EDIT CODE". Once you have selected EDIT CODE you are taken the the window where CSS is normally shown where you can do you Editing. Then you must select the leftmost Icon at the top which is "APPLY" you do not have to do a regedit search, that is some other handy little device I don't know about.

I am going to stop recording this because it's so routine that everyone knows it.

11

Here is another good site with CSS to integrate Google Calendar with your website. http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/

Also Nice looking, with a dramatic change, well integrated with the site, does not look google. https://churchm.ag/pretty-google-calendar-embeds-with-fullcalendar/ https://fullcalendar.io/ https://fullcalendar.io/docs/ https://www.daisyhill-lynmouth.co.uk/booking.html

The Google side of things:

  1. Login to your google account and Calendar from your computer, not your phone.
  2. Google Calendar – Create the public calendar, share editing with those needed, make it public only free/busy times.
  3. Follow these instructions to customize Google Calendar as best you can. http://support.activemobi.com/knowledgebase/articles/332043-how-to-embed-google-calendar-into-mobile-website
  4. Gear Icon -> Settings -> Calendars -> click the title of the calendar you’d like to embed\ Once you’re on this page you’ll see a whole section that is described as “Embed this Calendar” and over to the right you’ll notice a link that says “Customize the color, size, and other options.”
  5. Google Calendar – Go to Settings for the Calendar and copy the Embedding iframe.
  6. Save it in a file somewhere.
  7. Since we just want potential guests to View the Reserved and Open Dates, the calendar is most effective when it is small with a monthly view.

{

<iframe src=”https://calendar.google.com/calendar/embed?height=340&wkst=1&bgcolor=%23ffffff&src=[Your own calendar number in here]group.calendar.google.com&color=%231B887A&ctz=America%2FNew_York” style=”border:solid 1px #777″ width=”300″ height=”340″ frameborder=”0″ scrolling=”no”></iframe>

}

This is small enough so it does not have to be responsive at XS size because it fits and its readily visible. Its good enough now, and I will be improving it later and trying to add some better style to it and perhaps make it responsive.

I think the site above with help with styling.

12

Here is another way to Integrate the Google Calendar. http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/ I've decided that this is the one I am going to use to gain control over the styling of the calendar.

13

This one above requires PHP, but looks very interesting, suggesting how to host the CSS and page on your own website so that there is access to all of the CSS for the calendar. Because PHP is not available in BSS and it was a bit beyond me, I decided to just adjust some of the colors that are available in the iframe and make sure the calendar was responsive.

I would like to jettison the iframe, but don't know much about compatibility, perhaps Object will work in all browsers now?

14

I've embedded Google Calendar by use of an iframe into at TAB, simply using Custom Code, with this code

<Tabs>      
      <Tab Items>
      <Tab Pane>
           <div class="googleCalendar">
                  <iframe src="https://calendar.google.com/calendar/embed?height=300&amp;wkst=1&amp;bgcolor=%23ffffcc&amp;src=[Your Calendar Code]       group.calendar.google.com&amp;color=%231B887A&amp;ctz=America%2FNew_York"></iframe>
             </div>

There is some CSS that goes with that:

.googleCalendar iframe {
  width:100%;
  height:300px;
  border:4px solid #0099cc;
}

div.googleMap {
  width:100%;
  height:450px;
}

This works, but it is slow and not optimal speed because of the many fetches out to Google for many times with slower responses and is not optimal for Mobile devices. I am now considering a very simple booking calendar which simply enables/disables or blocks out dates and shows rentors visually what is available. We do NOT need date picking or any other fancy stuff.

I am looking at trying Flatpickr https://chmln.github.io/flatpickr/getting-started/#usage and would be interested in any thoughts about compatibility, or experience with it. The github repository seems to be using css, js, json and perhaps some html. It is extremely lean, 20kb compared to 200kb -300kb for bootstrap datetime picker and jquery UI datepicker

https://github.com/chmln/flatpickr/blob/master/README.md

15

I've embedded Google Calendar by use of an iframe into at TAB, simply using Custom Code, with this code

<Tabs>      
      <Tab Items>
      <Tab Pane>
           <div class="googleCalendar">
                  <iframe src="https://calendar.google.com/calendar/embed?height=300&amp;wkst=1&amp;bgcolor=%23ffffcc&amp;src=[Your Calendar Code]       group.calendar.google.com&amp;color=%231B887A&amp;ctz=America%2FNew_York"></iframe>
             </div>

There is some CSS that goes with that:

.googleCalendar iframe {
  width:100%;
  height:300px;
  border:4px solid #0099cc;
}

div.googleMap {
  width:100%;
  height:450px;
}

This works, but it is slow and not optimal speed because of the many fetches out to Google for many times with slower responses and is not optimal for Mobile devices. I am now considering a very simple booking calendar which simply enables/disables or blocks out dates and shows rentors visually what is available. We do NOT need date picking or any other fancy stuff.

I am looking at trying Flatpickr https://chmln.github.io/flatpickr/getting-started/#usage and would be interested in any thoughts about compatibility, or experience with it. The github repository seems to be using css, js, json and perhaps some html. It is extremely lean, 20kb compared to 200kb -300kb for bootstrap datetime picker and jquery UI datepicker

https://github.com/chmln/flatpickr/blob/master/README.md

I am wondering if this is a good way to have a simple booking calendar, but I'll need to be able to get onto a separate login html page that permits access to the the functions for setting dates and will have to figure out a way to do that.

16

Incidentally, I've abandoned the BSS Clean-Maps google embedded iframe because it is slow for Mobile access and have simply made a couple of 1024x768 optimized images for the Location. That is much much faster.