Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by William J. Terrell
William J. Terrell
17,403 Points

Using JavaScript to hide/delete calendar items once they have passed

I have the following code on an Alumni Events Page for our University's website:

<div class="cal-list loop-12">
    <div class="cal-list-item" name="Dec-5-Holiday-Open-House">
        <div class="cal-list-time loop-3 gutter-right">
            <p class="date">Saturday, Dec. 5</p>


            <p class="date">7:00 p.m. - 10:30 p.m.</p>
        </div>
        <!--cal-list-time-->


        <div class="cal-list-heading loop-9">
            <h4 class="internal-header">Holiday Open House</h4>


            <p class="cal-list-location">You and a guest are invited to Holiday
            Open House at the home of Jim and Judy (Kuergeleis '72)
            Schmuck.</p>


            <p class="cal-list-location">Celebrate the season with delicious
            appetizers, wonderful wine, and good friends.</p>


            <p class="cal-list-location"><a href=
            "https://goo.gl/maps/RouGr8zxpc32">Home of Jim and Judy (Kuergeleis
            '72) Schmuck<br>
            1438 Wellington View Lane<br>
            Chesterfield, MO</a>
            </p>


            <p class="cal-list-location">RSVP by Tuesday, December 1 to
            <a href="tel:15735924278">573.592.4278</a> or email <a href=
            "mailto:WWUGatherings@williamwoods.edu">WWUGatherings@williamwoods.edu</a></p>
        </div>
        <!--cal-list-heading-->
    </div>
    <!--cal-list-item-->


    <div class="cal-list-item" name="Jan-9-Winter-Brunch">
        <div class="cal-list-time loop-3 gutter-right">
            <p class="date">Saturday, Jan. 9</p>


            <p class="date">10:00 a.m. - Noon</p>
        </div>
        <!--cal-list-time-->


        <div class="cal-list-heading loop-9">
            <h4 class="internal-header">2016 Winter Brunch</h4>


            <p class="cal-list-location">You and a guest are invited to join
            fellow Callaway County alumni for the 2016 Winter Brunch</p>


            <p class="cal-list-location">Put on your favorite jeans and join us
            for spirits and delicious food!</p>


            <p class="cal-list-location"><em>Cost: $14</em>
            </p>


            <p class="cal-list-location"><a href=
            "https://goo.gl/maps/FND4sLqJCPC2">Nielsen Room of Tucker Dining
            Hall<br>
            William Woods University Campus</a>
            </p>


            <p class="cal-list-location">To RSVP, make your payment online by
            Monday, January 4. Contact <a href=
            "tel:15735924278">573.592.4278</a> for questions.</p>


            <p class="cal-list-location"><a class="btn" href=
            "https://co.clickandpledge.com/advanced/default.aspx?wid=33088"
            target="_blank">RSVP Today!</a>
            </p>
        </div>
        <!--cal-list-heading-->
    </div>
    <!--cal-list-item-->


    <div class="cal-list-item" name="Feb-3-Tampa-Area-Event">
        <div class="cal-list-time loop-3 gutter-right">
            <p class="date">Wednesday, Feb. 3</p>


            <p class="date">5:30 p.m. - 7:30 p.m.</p>
        </div>
        <!--cal-list-time-->


        <div class="cal-list-heading loop-9">
            <h4 class="internal-header">Tampa Area Alumni Appetizer and Wine
            Social</h4>


            <p class="cal-list-location">Co-hosted by Maria Zarceno Coggins '84
            and William Woods University</p>


            <p class="cal-list-location"><a href=
            "https://goo.gl/maps/gPexoFUjRmK2" target="_blank">Brio Tuscan
            Grille<br>
            Yandolino Room<br>
            International Plaza and Bay Street<br>
            2223 N. Westshore Blvd<br>
            Tampa, FL 33607</a>
            </p>


            <p class="cal-list-location">RSVP by Wednesday, January 20, to
            Michael Barnes at <a href="tel:15735924394">573.592.4394</a> or
            email <a href=
            "mailto:WWUGatherings@williamwoods.edu">WWUGatherings@williamwoods.edu</a></p>
        </div>
        <!--cal-list-heading-->
    </div>
    <!--cal-list-item-->


    <div class="cal-list-item" name="Feb-4-Naples-Area-Event">
        <div class="cal-list-time loop-3 gutter-right">
            <p class="date">Thursday, Feb. 4</p>


            <p class="date">11:30 a.m. - 1:00 p.m.</p>
        </div>
        <!--cal-list-time-->


        <div class="cal-list-heading loop-9">
            <h4 class="internal-header">Naples/Ft. Myers Area Alumni Lunch</h4>


            <p class="cal-list-location">Co-hosted by Melinda Cheryl
            Hall-Patterson &#8216;69 and Ruth Carlson Griffin '69</p>


            <p class="cal-list-location"><a href=
            "https://goo.gl/maps/2oP4vsz9jin" target="_blank">Chez Boet<br>
            755 12th Ave. South<br>
            Naples, FL 34102</a>
            </p>


            <p class="cal-list-location">RSVP by Wednesday, January 20, to
            Michael Barnes at <a href="tel:15735924394">573.592.4394</a> or
            email <a href=
            "mailto:WWUGatherings@williamwoods.edu">WWUGatherings@williamwoods.edu</a></p>
        </div>
        <!--cal-list-heading-->
    </div>
    <!--cal-list-item-->


    <div class="cal-list-item" name="Alumni-Weenend-2016">
        <div class="cal-list-time loop-3 gutter-right">
            <p class="date">Friday, Apr. 22 - Sunday, Apr. 24, 2016</p>
        </div>
        <!--cal-list-time-->


        <div class="cal-list-heading loop-9">
            <h4 class="internal-header">Alumni Weekend 2016</h4>


            <p class="cal-list-location">Additional details to be
            announced.</p>


            <p class="cal-list-location">Visit the <a href="/alumniweekend"
            target="_blank">Alumni Weekend page</a> to view events and photos
            from last year's Alumni Weekend!</p>
        </div>
        <!--cal-list-heading-->
    </div>
    <!--cal-list-item-->
</div>
<!-- End cal-list loop-12 -->


<div class="loop-12">
    <hr>
</div>
<br>
<br>


<h4><a href="https://www.facebook.com/WilliamWoodsUniversity/events" target=
"_blank">For the latest Alumni Events, check out the Events section of our
Facebook page</a>
</h4>

Ultimately, I would like to automate the construction of these types of calendars, but for now, I am just trying to get it set up to where it will hide an item once it has expired.

This is the JavaScript code that I have thus far:

/* Date Experiemnt */

var today = new Date(); // Sets today's date
/*
    Something to remember, some activities
    go on for more than one day, so be sure
    to set their date to the end-date.

    Alumni Weekend 2016 is an example of this.
*/
var dec5_2015 = new Date("December, 5, 2015");
var jan9_2016 = new Date("January, 9, 2016");
var feb3_2016 = new Date("February, 3, 2016");
var feb4_2016 = new Date("February, 4, 2016");
var apr24_2016 = new Date("April, 24, 2016");

if (today > dec5_2015) {

    // hide or delete div name="Dec-5-Holiday-Open-House"
    $('[name=Dec-5-Holiday-Open-House]').hide();
    console.log("Dec-5-Holiday-Open-House has been hidden.");

} else if (today > jan9_2016) {

    // hide or delete div name="Jan-9-Winter-Brunch"
    $('[name=Jan-9-Winter-Brunch]').hide();
    console.log("Jan-9-Winter-Brunch has been hidden.");

} else if (today > feb3_2016) {

    // hide or delete div name="Feb-3-Tampa-Area-Event"
    $('[name=Feb-3-Tampa-Area-Event]').hide();
    console.log("Feb-3-Tampa-Area-Event has been hidden.");

} else if (today > feb4_2016) {

    // hide or delete div name="Feb-4-Naples-Area-Event"
    $('[name=Feb-4-Naples-Area-Event]').hide();
    console.log("Feb-4-Naples-Area-Event has been hidden.");

} else if (today > apr24_2016) {

    // hide or delete the div name="Alumni-Weenend-2016"
    $('[name=Alumni-Weenend-2016]').hide();
    console.log("Alumni Weekend 2016 has been hidden.");

} else {
    // do nothing
}
/* End Date Experiemnt */

I was wondering about two things:

First, is there a better way of doing this, as opposed to making a variable for each event and doing an if/else for each one? Surely there is a way to put them into an array and perhaps iterate through, but I'm not sure how I might do that...

Second, when I tested to see if it would actually hide the items, I set "today" to "January, 1, 2016". When I did this, it hid "Dec-5-Holiday-Open-House", as expected. However, when I set "today" to "January, 1, 2017", the "Jan-9-Winter-Brunch" (scheduled for 2016) was still visible (as were all of the other events, all of which take place in 2016).

Any insight or suggestions would be appreciated.

Thanks!

1 Answer

Sherly Chan
Sherly Chan
7,250 Points
Sherly Chan
Sherly Chan
7,250 Points

Write a function thataccepts parameter - Event date. Convert it into date format and do the comparison.

William J. Terrell
William J. Terrell
17,403 Points

How might I do that? I've been trying all day, but I haven't gotten anywhere :(

I was also trying to get it set up to where it would go through the document and get each event listing so that it could put those in an array, then iterate through the array and compare, but I guess I just don't know enough about JS to be able to do it :\

I tried this:

var events = document.getElementsByClassName("cal-list-item").getAttribute("name");

console.log(events);

But I kept getting errors in the console...

Sherly Chan
Sherly Chan
7,250 Points

hi, what is the error message? If you get the undefined error, make sure you load the javascript source when the document is ready or put it at the end of body. Try this :

var events = document.getElementsByClassName("cal-list-item");
console.log(events);
for (var i=0; i< events.length; i++) {
   console.log(events[i].getAttribute("name"));
}