Shows or hides a content based on a given time range

by Vue.js Examples

vue-timed-content

Shows or hides a content based on a given time range.

View demo Download Source

Props

Prop Description Type Required Default
from Initial date Date | String | Number true
to End date Date | String | Number true
timezone Timezone used to calculate if the dates are in range String false America/Los_Angeles

Events

Event Description
show When content goes from being hidden to visible
hide When content goes from being visible to hidden

Usage

<template>
  <timed-content from="2019-04-01 00:00:00" to="2019-04-01 23:59:59" timezone="America/New_York">
    <p>Some April Fools' Day joke</p>
  </timed-content>
</template>

<script>
import TimedContent from "vue-timed-content";

export default {
  components: {
    TimedContent
  }
};
</script>

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

GitHub