vue-timed-content

Shows or hides a content based on a given time range

Demo

Props

Prop	Description	Type	Required	Default
from	Initial date	Date	true
to	End date	Date	true
time-zone	Timezone used to calculate if the dates are in range	String	false	Your local timezone

Events

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

Usage

<template>
  <div>
    <p>If you don't see anything it's because you are not in the range to be able view the content</p>
    <timed-content
      :from="new Date('2020/04/01 00:00:00')"
      :to="new Date('2020/04/01 23:59:59')"
      time-zone="America/Santo_Domingo"
    >
      <p>Some April Fools' Day joke 🃏</p>
    </timed-content>
  </div>
</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

Customize configuration

See Configuration Reference.