calendar.html

---
layout: plain
title: Community Calendar
description: Meshery is community-built and welcomes collaboration!
permalink: /calendar
---
<div class="calendar-meetings">
  <h1>Community Calendar</h1>
  <p>Join any or all of the weekly meetings</p>
  <!--Spinner Loader-->
  <div class="preloader"></div><div id='calendar'></div>
</div>
    <div class="row">
      <div style="width: 50%;">
        {% include newcomers-map.html %}
      </div>
      <div style="width: 70%; text-align: center;">
        <h2 class="subheading">Newcomers Welcome!</h2>
        <h3>Are you new to the community?</h3>      
        <p>Begin your journey by joining the community Slack. Then, use the resources linked in our Contributor's Journey Map and engage in the community and projects.</p>
        <a class="highlight" href="https://slack.layer5.io" style="display: block; margin:3rem auto;  width: fit-content;">Join Community</a>
      </div>
  </div>
<!-- Fullcalender CDN's -->
<link rel="stylesheet" href="/css/fullcalender.css">
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css">
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css">
<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/list@4.4.0/main.min.css">
<script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/list@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.0/main.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

//disable spinner
$(document).ready(function ()
    { 
      $('.preloader').fadeOut('slow');
})

//calendar
function displayContent() {
  loader.style.display='none';
  document.getElementById('calendar').style.display = 'block';
}

document.addEventListener("DOMContentLoaded", function() {
    loader = document.getElementById('loader');
    loadNow(1);
});

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'list', 'googleCalendar' ],
    buttonText: {
      today: 'Today'
    },
    customButtons: {
      addToCalendar: {
        text: 'Add To Your Calendar',
        click: function() {
          window.open('https://bit.ly/2SbrRhe', '_blank');
        }
      }
    },
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'addToCalendar'
    },
    displayEventTime: false, // don't show the time column in list view
    googleCalendarApiKey: 'AIzaSyDcmx-nLYfqvrfpEmVJuclwt9akayYfUgg',
    events: {
        googleCalendarId: 'layer5.io_eh2aa9dpf1g40elvoc762jnphs@group.calendar.google.com'
    },
    eventClick: function(arg) {
      // opens events in a popup window
      window.open(arg.event.url, '_blank', 'width=700,height=600');
      // prevents current tab from navigating
      arg.jsEvent.preventDefault();
    }
  });
  calendar.render();
});
</script>

<style>
  
  .fc-day {
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

.fc-unthemed td.fc-today {
    background: var(--brand-color-secondary) !important;
}


.fc-view{
  white-space:normal;
}
 

.fc-day-grid-event .fc-content {
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  transition: all 0.3s ease; 
  font-size:0.9rem;
}

.fc-day-grid-event:hover .fc-content{
  white-space: normal;
  overflow: visible;
  width: auto;
  height:auto;
  position: relative;
  z-index: 9999;
}

.fc-row{
  height:auto !important;
}
.fc-scroller{
  height:auto !important;
}

@media (max-width: 820px) {
  .fc-day-grid-event:hover .fc-content {
      font-size:0.8rem;
  }
}
@media (max-width: 680px) {
  .fc-day-grid-event:hover .fc-content {
    font-size:0.6rem;
  }
}
@media (max-width: 534px) {
  .fc-day-grid-event:hover .fc-content {
    font-size:0.4rem;
  }
}


.preloader {
    color: #00b39f;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  }

  .row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  @media screen and (min-width: 900px) {
    .row {
      /* change the flex direction */
      flex-direction: row;
    }
  }

  @-webkit-keyframes load6 {
    0% {
      -webkit-animation: loader 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
      animation: loader 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
    }

    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
        -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
        -0.297em -0.775em 0 -0.477em;
    }

    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
        -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
        -0.749em -0.34em 0 -0.477em;
    }

    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
        -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
        -0.82em -0.09em 0 -0.477em;
    }

    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }

  @keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
        -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
        -0.297em -0.775em 0 -0.477em;
    }

    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
        -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
        -0.749em -0.34em 0 -0.477em;
    }

    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
        -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
        -0.82em -0.09em 0 -0.477em;
    }

    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }

  @-webkit-keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  </style>