<commit_before><h1 class="doc-page-title">How to use it</h1>

<p>
  This component is built with a technique known as <em>Contextual Components</em>. If you haven't
  heard of it, check <a href="https://guides.emberjs.com/v2.8.0/components/wrapping-content-in-a-component/#toc_sharing-component-data-with-its-wrapped-content">the official guides</a> for some background.
</p>

<p>
  The basic usage is pretty simple. There is no mandatory fields. Just invoke the <code>power-calendar</code> component and yield
  the calendar to the block. Once inside the block, the yielded calendar has a couple components inside,
  but the one you probably care more abour is named <code>days.</code>
</p>

{{#code-sample hbs="how-to-use-it-1.hbs" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  Nice, but not very interesting. The <code>calendar.days</code> component renders a grid of days, and it is smart enough to display
  the current month but that's it. Let's see how to show a different month.
</p>

<h3><code>center</code></h3>

<p>
  To make the calendar render centered on a different month just pass <code>center=someDate</code> and the calendar will
  display the month of that date.
</p>
<p>
  It is important to note that <code>center</code> is a date in which we center our atention but not necessarily the center of the time window
  we display. In the month view (the default) it doesn't mater if that date it's the 1st day or the 31st, the rendered month will be the same.
  Let's render October of 2013.
</p>

{{#code-sample hbs="how-to-use-it-2.hbs" js="how-to-use-it-2-js.js" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  The month above is November of 2013, but that's hard to know if there is nothing else telling us. The second
  component that the calendar has and that you will find yourself using often is <code>calendar.nav</code>.
  This component displays the name of the month and, optionally, some controllers to navigate to the previous/next month.
</p>

{{#code-sample hbs="how-to-use-it-3.hbs" js="how-to-use-it-3-js.js" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  Oh, and by the way, ember-power-calendar and all its sub-components speak native <code>Date</code> and <code>MomentJS</code>.
  All options that are dates can take values in either format, and all action that this component fires will contain dates in both formats too.
</p>

<h3><code>selected</code></h3>

<p>
  Sometimes you want a day of the month to be highlighted. To do it pass <code>selected=someDate</code> to the component.
</p>

{{#code-sample hbs="how-to-use-it-4.hbs" js="how-to-use-it-4-js.js" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  You can see that the calendar shows the selected date in blue. Besides, you might also have noticed that
  the despite just passing a <code>selected</code> option, the month is not the current one. That is because, in the
  absence of a specific <code>center</code>, the calendar will show the month of the selected date. But take into account
  that if both options are provided, <code>center</code> <strong>always</strong> prevails.
</p>

<p>
  Enough for static calendars. If you just wanted to display a static grid of days you probably wouldn't be using an ember-addon for that.
  You want to navigate months, you want to select days and ranges. Let's see how to do this things in the next chapter.
</p><commit_msg>Light edit of How to Use for grammar and spelling<commit_after><h1 class="doc-page-title">How to use it</h1>

<p>
  This component is built with a technique known as <em>Contextual Components</em>. If you haven't
  heard of it, check <a href="https://guides.emberjs.com/v2.8.0/components/wrapping-content-in-a-component/#toc_sharing-component-data-with-its-wrapped-content">the official guides</a> for some background.
</p>

<p>
  The basic usage is pretty simple. There are no mandatory fields. Just invoke the <code>power-calendar</code> component and yield
  the calendar to the block. Once inside the block, the yielded calendar has a couple of components inside,
  but the one you probably care most about is named <code>days</code>.
</p>

{{#code-sample hbs="how-to-use-it-1.hbs" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  Nice, but not very interesting. The <code>calendar.days</code> component renders a grid of days, and it is smart enough to display
  the current month but that's it. Let's see how to show a different month.
</p>

<h3><code>center</code></h3>

<p>
  To make the calendar render centered on a different month just pass <code>center=someDate</code> and the calendar will
  display the month of that date.
</p>
<p>
  It is important to note that <code>center</code> is a date in which we center our atention but not necessarily the center of the time window
  we display. In the month view (the default) it doesn't mater if that date it's the 1st day or the 31st, the rendered month will be the same.
  Let's render October of 2013.
</p>

{{#code-sample hbs="how-to-use-it-2.hbs" js="how-to-use-it-2-js.js" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  The month above is November of 2013, but that's hard to know if there is nothing else telling us. The second
  component that the calendar has and that you will find yourself using often is <code>calendar.nav</code>.
  This component displays the name of the month and, optionally, some controllers to navigate to the previous/next month.
</p>

{{#code-sample hbs="how-to-use-it-3.hbs" js="how-to-use-it-3-js.js" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  Oh, and by the way, ember-power-calendar and all its sub-components speak native <code>Date</code> and <code>MomentJS</code>.
  All options that are dates can take values in either format, and all actions that this component fires will contain dates in both formats too.
</p>

<h3><code>selected</code></h3>

<p>
  Sometimes you want a day of the month to be highlighted. To do it pass <code>selected=someDate</code> to the component.
</p>

{{#code-sample hbs="how-to-use-it-4.hbs" js="how-to-use-it-4-js.js" as |partialName|}}
  {{partial partialName}}
{{/code-sample}}

<p>
  You can see that the calendar shows the selected date in blue. You may have also noticed that
  the despite only passing a <code>selected</code> option, the month is not the current one. That is because in the
  absence of a specific <code>center</code>, the calendar will show the month of the selected date. If both options
  are provided, <code>center</code> <strong>always</strong> prevails.
</p>

<p>
  Enough of static calendars. If you just wanted to display a static grid of days you probably wouldn't be using an ember-addon for that.
  You want to navigate months, you want to select days and ranges. Let's see how to do these things in the next chapter.
</p>
{'fraction_non_alphanumeric': 0.10998552821997105, 'fraction_numerical': 0.007814761215629523, 'mean_word_length': 4.077883908890522, 'pattern_counts': {'":': 0, '<': 123, '<?xml version=': 0, '>': 123, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '256127', 'n_tokens_mistral': 2157, 'n_tokens_neox': 2106, 'n_words': 943}