Search code examples
javascriptcalendartoday-extension

How do I use JavaScript code to delete calendar items once they have passed?

I use this HTML code to display my events

<style>
.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
</style>
<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<p><b>Friday, 12/22/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 12/25/2017</p> </b>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
<p><b>Tuesday, 12/26/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 12/27/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Thursday, 12/28/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Friday, 12/29/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/01/2018</p> </b>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
<p><b>Tuesday, 01/02/2018</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 01/03/2018</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/15/2018</p> </b>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</marquee>

How can I use Javascript to make it delete the date after it has passed? So like at 12:00 PM on 12/25/2017 the 12/22/2017 event is deleted and is gone. I use the New Google Sites and wondering how this can work.

Solution

  • The simplest code given your current markup is a little more complex than it needs to be, but using querySelectorAll, and some array methods, you can do this:

    const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
Array.from(document.querySelectorAll('marquee>p>b'), element => ({
  element, 
  date: dateFromString(element.innerHTML.split(', ')[1])
}))
.filter(x => x.date < Date.now())
.map(({element}) => element.parentElement)
.forEach(x => {
  x.nextElementSibling.nextElementSibling.nextElementSibling.remove();
  x.nextElementSibling.nextElementSibling.remove();
  x.nextElementSibling.remove();
  x.remove();
});
    .html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
    <marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/01/2018 </b></p>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
<p><b>Tuesday, 01/02/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 01/03/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/15/2018 </b></p>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</marquee>

    If you wrap each "date" in a div, it gets easier

    const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
Array.from(document.querySelectorAll('marquee>div>p>b'), element => ({
  element, 
  date: dateFromString(element.innerHTML.split(', ')[1])
}))
.filter(x => x.date < Date.now())
.forEach(({element}) => element.parentElement.parentElement.remove());
    .html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
    <marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<div>
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
</div><div>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 01/01/2018 </b></p>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
</div><div>
<p><b>Tuesday, 01/02/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Wednesday, 01/03/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 01/15/2018 </b></p>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</div>
</marquee>

    Even easier if you add some useful information to each div - e.g

    data-date='12/22/2017'


    const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
document.querySelectorAll('marquee>div').forEach(element => {
    if (dateFromString(element.dataset.date) < Date.now()) {
        element.remove();
    }
});
    .html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
    <marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<div data-date='12/22/2017'>
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/25/2017'>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
</div><div data-date='12/26/2017'>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/27/2017'>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/28/2017'>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/29/2017'>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div>
</marquee>