I'm working on a day planner app and I am using moments.js. I have an array of objects and each object has the hours and a blank activity.
I am trying to display each hour/activity to the page which is working but I am also trying to compare the hours listed to the current hour and set the style to past/present/future depending on if the hour is before, after, or equal to the current hour. I'm trying to use isBefore and isAfter but it isn't working.
Everything is working except I cannot find a way to determine if 10 am is before or after 11 am for example.
Here is my code. It will go from 8 am - 5 pm but I added extra objects as it's late now.
let mySched = [
{
hour: '8 am',
activity: ''
},
{
hour: '9 am',
activity: ''
},
{
hour: '10 am',
activity: ''
},
{
hour: '11 am',
activity: ''
},
{
hour: '12 am',
activity: ''
},
{
hour: '1 pm',
activity: ''
},
{
hour: '2 pm',
activity: ''
},
{
hour: '3 pm',
activity: ''
},
{
hour: '4 pm',
activity: ''
},
{
hour: '5 pm',
activity: ''
},
{
hour: '06 pm',
activity: ''
},
{
hour: '07 pm',
activity: ''
},
{
hour: '08 pm',
activity: ''
},
{
hour: '09 pm',
activity: ''
},
{
hour: '10 pm',
activity: ''
},
{
hour: '11 pm',
activity: ''
},
{
hour: '12 pm',
activity: ''
}
]
function whenIsNow(hour) {
if (moment().isAfter(hour)) {
return 'future';
} else if (moment().isBefore(hour)) {
return 'past';
} else {
return 'present';
}
}
for (let i = 0; i < mySched.length; i++) {
let myHour = mySched[i].hour;
let timeBlock = $(
`<div class="col-12 time-block">
<div class="row">
<div id="${i}" class="col-12 col-md-2 hour">${myHour}</div>
<div id="description" class="col-12 col-md-8 description ${whenIsNow(myHour)}"><textarea name="description">test</textarea></div>
<div class="col-12 col-md-2 button"></div>
</div>
</div>
</div>`
)
let schedTime = $(`#${i}`);
schedTime.append(myHour);
plannerEl.append(timeBlock);
}
I STRONGLY suggest not to store the time in string format and use 24hour format for coding. Then convert the displayed value to ampm
let mySched = [ "Activity at midnight", "Activity at 1am", "Activity at 2am", "Activity at 3am", "Activity at 4am", "Activity at 5am", "Activity at 6am", "Activity at 7am", "Activity at 8am", "Activity at 9am", "Activity at 10am", "Activity at 11am", "Activity at 12am", "Activity at 1pm", "Activity at 2pm", "Activity at 3pm", "Activity at 4pm", "Activity at 5pm", "Activity at 6pm", "Activity at 7pm", "Activity at 8pm", "Activity at 9pm", "Activity at 10pm", "Activity at 11pm" ];
const nowHour = new Date().getHours()
const ampm = num => num > 12 ? `${num-12}pm` : `${num}am`
const whenTime = (hour,when) => { if (hour < when) return "past"; if (hour === when) return "now"; return "future" };
$("#planner").html(mySched.map((shed,i) => `<div class="col-12 time-block">
<div class="row">
<div id="${ampm(i)}" class="col-12 col-md-2 hour">${i === 0? 'midnight' : ampm(i)}</div>
<div id="description" class="col-12 col-md-8">${whenTime(i,nowHour)} <textarea name="description">${shed}</textarea></div>
<div class="col-12 col-md-2 button"></div>
</div>
</div>
</div>`).join("")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="planner"></div>Here is what I ended up doing.
// get the current day
let myDay = moment().format("dddd, MMMM Do YYYY");
// target current day div
let currentDayEl = $('#currentDay');
// Append the date to current day div
currentDayEl.append(myDay);
// target the container
let containerEl = $('.container');
let mySched = [];
// get the current hour
let currHour = (moment().get('hour'));
// function to check if the the
//current hour is before, after, or the same as
// each hour of the planner and setting the
// past, present, or future class to the event
function whenIsNow(hour) {
// this is the hour passed to the function
let myHour = (moment(parseInt(hour)));
// compare the hour passed in to the current hour
// and set the class acordingly
if (myHour.isSame(currHour)) {
return 'present';
} else if (myHour.isBefore(currHour)) {
return 'past';
} else if (myHour.isAfter(currHour)) {
return 'future';
}
}
// function to convert hour displayed to 12 hour time
// and add am or pm.
function convertTime(myHour) {
if (myHour > 0 && myHour <= 12) {
myHour = myHour + 'am';
} else if (myHour > 12) {
(myHour = myHour - 12 + 'pm');
} else if (myHour == 0) {
myHour = 12 + 'am';
}
return myHour;
}
// count from 9-18 and create each time block
for (let i = 9; i < 18; i++) {
// get event[i] from local storage
let currentEvent = localStorage.getItem(i);
// if the current event is null set currentEvent to ''
if (currentEvent == null) {
currentEvent = '';
}
// create the timeBlocks
let timeBlock = $(
`<div class="row">
<div id="${i}" class="col-1 d-flex justify-content-center hour">${convertTime(i)}</div>
<div id="description" class="col-9 description ${whenIsNow(i)}"><textarea class="myText">${currentEvent}</textarea></div>
<div class="col-2 pl-0"><button class="btn btn-lg saveBtn"><i class="far fa-save"></i></button></div>
</div>`
);
// append time blocks to container element
containerEl.append(timeBlock);
}