Incorporating YouTube links into calendar events for each specific date

Question

Incorporating YouTube links into calendar events for each specific date

Our team is currently developing an online class website where our client wants to incorporate recorded classes. These recorded classes will be uploaded to YouTube in unlisted format and then linked to specific calendar dates. I will share the code for the calendar below.

To view the code, please visit: https://codepen.io/internette/pen/YqJEjY

<div class="yellow">
  <div id="calendar">
    <div id="toolbar"></div>
    ... (code continues) ...
</div>

We are looking to create a feature where clicking on a date in the calendar will toggle a space displaying a link to the corresponding YouTube video. Exciting stuff!

javascript html css sass calendar

Answer 1

Answer №1

To incorporate the anchor tag in a similar manner to the other elements, follow the modified code below which includes a link to YouTube:

var allMonths, dayArray = [],
  click = 0,
  dotw = [/Sun/gi, /Mon/gi, /Tue/gi, /Wed/gi, /Thu/gi, /Fri/gi, /Sat/gi];

function getAllDays(month, year) {
  var date = new Date(year, month, 1);
  var days = [];
  while (date.getMonth() === month) {
    var dayToPush = new Date(date);
    days.push(dayToPush);
    date.setDate(date.getDate() + 1);
  }
  return days;
}

function getYear() {
  var d = new Date();
  var curYear = d.getFullYear();
  return curYear;
}

function addElements(query, id) {
  //for onload, use activeIndex+1 as query value
  document.getElementById(id).innerHTML = '';
  var allDays = getAllDays((query), getYear());
  for (var i = 0; i < allDays.length; i++) {
    allDays[i] = allDays[i].toString();
  }
  var stopNow = false,
    counter = 0;
  for (var i = 0; i < dotw.length; i++) {
    if (allDays[0].match(dotw[i])) {
      stopNow = true;
    } else {
      if (!stopNow) {
        counter += 1;
      }
    }
  }
  for (var i = 0; i < counter; i++) {
    allDays.unshift(" ");
  }
  for (var i = 0; i < allDays.length; i++) {
    var singleDay = document.createElement('div');
    singleDay.className = 'day';
    singleDay.dataset.title = '';
    singleDay.dataset.location = '';
    //Parse Day
    if (allDays[i] !== " ") {
      var dayOTW = allDays[i].split(' ')[2];
      if (dayOTW.charAt(0) === "0") {
        allDays[i] = dayOTW.replace(/0/gi, '');
      } else {
        allDays[i] = dayOTW;
      }
    }
    singleDay.innerHTML = allDays[i];
    document.getElementById(id).appendChild(singleDay);
  }
  var allOfDays = document.querySelectorAll('#days .day');
  var dayArray = [];
  for (var i = 0; i < allOfDays.length; i++) {
    if (i === 6 || i === 13 || i === 20 || i === 27 || i === 34) {
      allOfDays[i].outerHTML += '<div class="day-details"><div id="input-arrow"></div><div class="input"><a href="https://www.youtube.com/watch?v=PkhPuH8G5Hg">CLICK ME</a></div></div>'
    }
  }
  document.getElementById(id).innerHTML += '<div class="day-details"><div id="input-arrow"></div><div class="input"><a href="https://www.youtube.com/watch?v=PkhPuH8G5Hg">CLICK ME</a></div><div style="clear:both"></div>';
}
//Thanks: http://stackoverflow.com/questions/4649699/is-it-possible-to-get-elements-numerical-index-in-its-parent-node-without-loopi
function whichChild(elem) {
  var i = 0;
  while ((elem = elem.previousSibling) != null) ++i;
  return i;
}
window.onload = function() {
  allMont...

<link href="https://codepen.io/internette/pen/YqJEjY.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="yellow">
  <div id="calendar">
    <div id="toolbar"></div>
    <div id="color-picker" class="show"></div>
    <div id="dates" class="show">
      <div id="lastMt">&lsaquo;</div>
      <div id="nextMt">&rsaquo;</div>
      <div id="months-cont">
        <div id="months">
          <span class="active month">January</span><span ...

Answer 2

To incorporate the anchor tag in a similar manner to the other elements, follow the modified code below which includes a link to YouTube:

var allMonths, dayArray = [],
  click = 0,
  dotw = [/Sun/gi, /Mon/gi, /Tue/gi, /Wed/gi, /Thu/gi, /Fri/gi, /Sat/gi];

function getAllDays(month, year) {
  var date = new Date(year, month, 1);
  var days = [];
  while (date.getMonth() === month) {
    var dayToPush = new Date(date);
    days.push(dayToPush);
    date.setDate(date.getDate() + 1);
  }
  return days;
}

function getYear() {
  var d = new Date();
  var curYear = d.getFullYear();
  return curYear;
}

function addElements(query, id) {
  //for onload, use activeIndex+1 as query value
  document.getElementById(id).innerHTML = '';
  var allDays = getAllDays((query), getYear());
  for (var i = 0; i < allDays.length; i++) {
    allDays[i] = allDays[i].toString();
  }
  var stopNow = false,
    counter = 0;
  for (var i = 0; i < dotw.length; i++) {
    if (allDays[0].match(dotw[i])) {
      stopNow = true;
    } else {
      if (!stopNow) {
        counter += 1;
      }
    }
  }
  for (var i = 0; i < counter; i++) {
    allDays.unshift(" ");
  }
  for (var i = 0; i < allDays.length; i++) {
    var singleDay = document.createElement('div');
    singleDay.className = 'day';
    singleDay.dataset.title = '';
    singleDay.dataset.location = '';
    //Parse Day
    if (allDays[i] !== " ") {
      var dayOTW = allDays[i].split(' ')[2];
      if (dayOTW.charAt(0) === "0") {
        allDays[i] = dayOTW.replace(/0/gi, '');
      } else {
        allDays[i] = dayOTW;
      }
    }
    singleDay.innerHTML = allDays[i];
    document.getElementById(id).appendChild(singleDay);
  }
  var allOfDays = document.querySelectorAll('#days .day');
  var dayArray = [];
  for (var i = 0; i < allOfDays.length; i++) {
    if (i === 6 || i === 13 || i === 20 || i === 27 || i === 34) {
      allOfDays[i].outerHTML += '<div class="day-details"><div id="input-arrow"></div><div class="input"><a href="https://www.youtube.com/watch?v=PkhPuH8G5Hg">CLICK ME</a></div></div>'
    }
  }
  document.getElementById(id).innerHTML += '<div class="day-details"><div id="input-arrow"></div><div class="input"><a href="https://www.youtube.com/watch?v=PkhPuH8G5Hg">CLICK ME</a></div><div style="clear:both"></div>';
}
//Thanks: http://stackoverflow.com/questions/4649699/is-it-possible-to-get-elements-numerical-index-in-its-parent-node-without-loopi
function whichChild(elem) {
  var i = 0;
  while ((elem = elem.previousSibling) != null) ++i;
  return i;
}
window.onload = function() {
  allMont...

<link href="https://codepen.io/internette/pen/YqJEjY.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="yellow">
  <div id="calendar">
    <div id="toolbar"></div>
    <div id="color-picker" class="show"></div>
    <div id="dates" class="show">
      <div id="lastMt">&lsaquo;</div>
      <div id="nextMt">&rsaquo;</div>
      <div id="months-cont">
        <div id="months">
          <span class="active month">January</span><span ...

Incorporating YouTube links into calendar events for each specific date

Answer №1

Similar questions

Enter a keyword in the search bar to find what you're looking

if and elsif JSON with Angular

Developing an interactive Vue component that is able to be modified using custom properties within the HTML code

Display a dynamic list of data fetched from an axios Get request in a React MUI dropdown menu

Generate a new div element dynamicaly after every 10 elements are added

How come my FormData POST request isn't being blocked by CORS policy?

Creating an href link within a button that is contained within a collapse component

Creating a personalized login function in LaravelWould you like to learn how to

What are the steps to create two frames using Twitter Bootstrap?

There seems to be an issue with accessing the 'request' property of an undefined object

Thymeleaf: Expression parsing error

Node.js (npm) is still unable to locate python despite setting %PYTHON% beforehand

What is the best way to style divs in this manner?

Utilizing Nginx to Reverse Proxy to Node.js and Implement Rewrites

Enhancing websites with CSS3 and VueJS for fluid and captivating background gradients transitions

Generate a Calendar Table using JavaScript in the Document Object Model (DOM

Ways to isolate AngularJS files without relying on the global scope

Using Express for Managing Subdomains, Redirects, and Hosting Static Files

React: When an array state is controlling my components, why aren't they re-rendering?

The scroll bar in the main window vanishes as the popup window expands in size