We use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Small details such as the availability hours can make or break a dialogue between you and your future customers.

COIDEA - ciTime Plugin for Opening and Closing Times

We created the easy-to-use ciTime plugin, perfect for adding opening and closing times to your website in order to maintain it without spending too much time or energy, to avoid misunderstandings of this kind. ciTime allows you to set your opening and closing times as well as pause and display them simply with "we're open" or "we're closed" messages.

Usage

Create HTML structure:

<div class="ci-time" data-open-text="we're open" data-close-text="we're closed">
  <div class="ci-time-target">
    <div data-day="Monday" data-time-start="09:00:00" data-time-end="18:00:00" data-pause-start="" data-pause-end="">
    </div>
    <div data-day="Tuesday" data-time-start="09:00:00" data-time-end="18:00:00" data-pause-start="" data-pause-end="">
    </div>
    <div data-day="Wednesday" data-time-start="09:00:00" data-time-end="18:00:00" data-pause-start="" data-pause-end="">
    </div>
    <div data-day="Thursday" data-time-start="09:00:00" data-time-end="18:00:00" data-pause-start="" data-pause-end="">
    </div>
    <div data-day="Friday" data-time-start="09:00:00" data-time-end="18:00:00" data-pause-start="" data-pause-end="">
    </div>
    <div data-day="Saturday" data-time-start="09:00:00" data-time-end="13:00:00" data-pause-start="" data-pause-end="">
    </div>
    <div data-day="Sunday" data-time-start="" data-time-end="" data-pause-start="" data-pause-end="">
    </div>
  </div> 
</div>

Include plugin's CSS

<link rel="stylesheet" href="assets/css/demo.css">

Include jQuery, plugin's JS & call the plugin with options:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="assets/js/demo.js"></script>

$('.ci-time').ciTime({
  target: '.ci-time-target',
  openText: $('.ci-time').data('open-text'), // or simple openText: 'Open'
  closeText: $('.ci-time').data('close-text') // or simple closeText: 'Close'
});

References and Credits