Calculating Days Left

Using the date property

Each event object has a date property:

{
  id: 1,
  name: "Graduation",
  details: "wooohoo!!!",
  date: "2027-09-25",
  background: "linear-gradient(135deg, #FF416C, #FF4B2B)",
}

This date will be used to calculate the number of days until the event happens. Also for events which have passed, the number of days since the event.

The calculation will take place in the App.vue and be passed to the event component as a prop. In the <script> section below our events, create a new function to handle this:

const calculateDaysLeft = function (date) {
    const eventDate = new Date(date);
    const today = new Date();
    const diffTime = eventDate - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
};

• Create event date: const eventDate = new Date(date);: Converts the event's date into a JavaScript Date object.
• Get today's date: const today = new Date();: Gets the current date and time as a Date object.
• Calculate time difference: const diffTime = eventDate - today;: Subtracts today's date from the event date, giving the difference in milliseconds.
• Convert to days: const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));: Divides the millisecond difference by the number of milliseconds in a day, then rounds up to the nearest whole number.
• Return days left: return diffDays;: Returns the number of days left (or days since, if negative) until the event.

Passing the date as a prop

Then inside the <template> area, pass this calculation as a prop to the event:

<Event
  v-for="event in eventData"
  :key="event.id"
  :name="event.name"
  :details="event.details"
  :background="event.background"
  :days-left="calculateDaysLeft(event.date)"
/>

This will call the calculateDaysLeft() function for each event, passing in the events date. Over to the Event.vue component to add this to defineProps():

<script setup>
defineProps({
    name: {
        type: String,
        required: true,
    },
    details: {
        type: String,
        required: true,
    },
    background: {
        type: String,
        required: true,
    },
    daysLeft: {
        type: Number,
        required: true,
    },
});
</script>

The <template> area currently has a hard-coded value for days left:

<div>
  <p class="days_left">56</p>
  <small>days left</small>
</div>

Update this with our prop value:

<p class="days_left">{{ daysLeft }}</p>

This should now show the number of days to/from the event inside the browser!