<commit_before>
import React from 'react';
import { Navbar, Page, Block, BlockTitle, List, ListItem, Input } from 'framework7-react';

export default class extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Page onPageInit={this.onPageInit.bind(this)} onPageBeforeRemove={this.onPageBeforeRemove.bind(this)}>
        <Navbar title="Calendar" backLink="Back"></Navbar>
        <Block>
          <p>Calendar is a touch optimized component that provides an easy way to handle dates.</p>
          <p>Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).</p>
        </Block>

        <BlockTitle>Default setup</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Your birth date" readonly inputId="demo-calendar-default"/>
          </ListItem>
        </List>

        <BlockTitle>Custom date format</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select date" readonly inputId="demo-calendar-date-format"/>
          </ListItem>
        </List>

        <BlockTitle>Multiple Values</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select multiple dates" readonly inputId="demo-calendar-multiple"/>
          </ListItem>
        </List>

        <BlockTitle>Range Picker</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select date range" readonly inputId="demo-calendar-range"/>
          </ListItem>
        </List>

        <BlockTitle>Open in Mondal</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select date" readonly inputId="demo-calendar-modal"/>
          </ListItem>
        </List>

        <BlockTitle>Calendar Page</BlockTitle>
        <List>
          <ListItem
            title="Open Calendar Page"
            link="/calendar-page/"
          />
        </List>

        <BlockTitle>Inline with custom toolbar</BlockTitle>
        <Block className="no-padding">
          <div id="demo-calendar-inline-container"></div>
        </Block>
        <BlockTitle>Jalali Calendar</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Your birth date in Jalali" readonly inputId="demo-jcalendar-default"/>
          </ListItem>
        </List>
      </Page>
    );
  }
  onPageInit(e) {
    const self = this;
    const app = self.$f7;
    const $ = self.$$;
    // Default
    self.calendarDefault = app.calendar.create({
      inputEl: '#demo-calendar-default',
    });
    // Jalali
    self.jcalendarDefault = app.calendar.create({
      calendarType: 'jalali',
      inputEl: '#demo-jcalendar-default',
    });
    // With custom date format
    self.calendarDateFormat = app.calendar.create({
      inputEl: '#demo-calendar-date-format',
      dateFormat: 'DD, MM dd, yyyy',
    });
    // With multiple values
    self.calendarMultiple = app.calendar.create({
      inputEl: '#demo-calendar-multiple',
      dateFormat: 'M dd yyyy',
      multiple: true,
    });
    // Range Picker
    self.calendarRange = app.calendar.create({
      inputEl: '#demo-calendar-range',
      dateFormat: 'M dd yyyy',
      rangePicker: true,
    });
    // Custom modal
    self.calendarModal = app.calendar.create({
      inputEl: '#demo-calendar-modal',
      openIn: 'customModal',
      header: true,
      footer: true,
      dateFormat: 'MM dd yyyy',
    });
    // Inline with custom toolbar
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    self.calendarInline = app.calendar.create({
      containerEl: '#demo-calendar-inline-container',
      value: [new Date()],
      renderToolbar() {
        return `
          <div class="toolbar calendar-custom-toolbar no-shadow">
            <div class="toolbar-inner">
              <div class="left">
                <a href="#" class="link icon-only"><i class="icon icon-back ${self.$theme.md ? 'color-black' : ''}"></i></a>
              </div>
              <div class="center"></div>
              <div class="right">
                <a href="#" class="link icon-only"><i class="icon icon-forward ${self.$theme.md ? 'color-black' : ''}"></i></a>
              </div>
            </div>
          </div>
        `.trim();
      },
      on: {
        init(c) {
          $('.calendar-custom-toolbar .center').text(`${monthNames[c.currentMonth]}, ${c.currentYear}`);
          $('.calendar-custom-toolbar .left .link').on('click', () => {
            self.calendarInline.prevMonth();
          });
          $('.calendar-custom-toolbar .right .link').on('click', () => {
            self.calendarInline.nextMonth();
          });
        },
        monthYearChangeStart(c) {
          $('.calendar-custom-toolbar .center').text(`${monthNames[c.currentMonth]}, ${c.currentYear}`);
        },
      },
    });
  }
  onPageBeforeRemove() {
    const self = this;
    self.calendarDefault.destroy();
    self.jcalendarDefault.destroy();
    self.calendarDateFormat.destroy();
    self.calendarMultiple.destroy();
    self.calendarRange.destroy();
    self.calendarModal.destroy();
    self.calendarInline.destroy();
  }
};
<commit_msg>[Kitchen Sink] Calendar - Fix small typo<commit_after>
import React from 'react';
import { Navbar, Page, Block, BlockTitle, List, ListItem, Input } from 'framework7-react';

export default class extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Page onPageInit={this.onPageInit.bind(this)} onPageBeforeRemove={this.onPageBeforeRemove.bind(this)}>
        <Navbar title="Calendar" backLink="Back"></Navbar>
        <Block>
          <p>Calendar is a touch optimized component that provides an easy way to handle dates.</p>
          <p>Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).</p>
        </Block>

        <BlockTitle>Default setup</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Your birth date" readonly inputId="demo-calendar-default"/>
          </ListItem>
        </List>

        <BlockTitle>Custom date format</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select date" readonly inputId="demo-calendar-date-format"/>
          </ListItem>
        </List>

        <BlockTitle>Multiple Values</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select multiple dates" readonly inputId="demo-calendar-multiple"/>
          </ListItem>
        </List>

        <BlockTitle>Range Picker</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select date range" readonly inputId="demo-calendar-range"/>
          </ListItem>
        </List>

        <BlockTitle>Open in Modal</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Select date" readonly inputId="demo-calendar-modal"/>
          </ListItem>
        </List>

        <BlockTitle>Calendar Page</BlockTitle>
        <List>
          <ListItem
            title="Open Calendar Page"
            link="/calendar-page/"
          />
        </List>

        <BlockTitle>Inline with custom toolbar</BlockTitle>
        <Block className="no-padding">
          <div id="demo-calendar-inline-container"></div>
        </Block>
        <BlockTitle>Jalali Calendar</BlockTitle>
        <List noHairlinesMd>
          <ListItem>
            <Input type="text" placeholder="Your birth date in Jalali" readonly inputId="demo-jcalendar-default"/>
          </ListItem>
        </List>
      </Page>
    );
  }
  onPageInit(e) {
    const self = this;
    const app = self.$f7;
    const $ = self.$$;
    // Default
    self.calendarDefault = app.calendar.create({
      inputEl: '#demo-calendar-default',
    });
    // Jalali
    self.jcalendarDefault = app.calendar.create({
      calendarType: 'jalali',
      inputEl: '#demo-jcalendar-default',
    });
    // With custom date format
    self.calendarDateFormat = app.calendar.create({
      inputEl: '#demo-calendar-date-format',
      dateFormat: 'DD, MM dd, yyyy',
    });
    // With multiple values
    self.calendarMultiple = app.calendar.create({
      inputEl: '#demo-calendar-multiple',
      dateFormat: 'M dd yyyy',
      multiple: true,
    });
    // Range Picker
    self.calendarRange = app.calendar.create({
      inputEl: '#demo-calendar-range',
      dateFormat: 'M dd yyyy',
      rangePicker: true,
    });
    // Custom modal
    self.calendarModal = app.calendar.create({
      inputEl: '#demo-calendar-modal',
      openIn: 'customModal',
      header: true,
      footer: true,
      dateFormat: 'MM dd yyyy',
    });
    // Inline with custom toolbar
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    self.calendarInline = app.calendar.create({
      containerEl: '#demo-calendar-inline-container',
      value: [new Date()],
      renderToolbar() {
        return `
          <div class="toolbar calendar-custom-toolbar no-shadow">
            <div class="toolbar-inner">
              <div class="left">
                <a href="#" class="link icon-only"><i class="icon icon-back ${self.$theme.md ? 'color-black' : ''}"></i></a>
              </div>
              <div class="center"></div>
              <div class="right">
                <a href="#" class="link icon-only"><i class="icon icon-forward ${self.$theme.md ? 'color-black' : ''}"></i></a>
              </div>
            </div>
          </div>
        `.trim();
      },
      on: {
        init(c) {
          $('.calendar-custom-toolbar .center').text(`${monthNames[c.currentMonth]}, ${c.currentYear}`);
          $('.calendar-custom-toolbar .left .link').on('click', () => {
            self.calendarInline.prevMonth();
          });
          $('.calendar-custom-toolbar .right .link').on('click', () => {
            self.calendarInline.nextMonth();
          });
        },
        monthYearChangeStart(c) {
          $('.calendar-custom-toolbar .center').text(`${monthNames[c.currentMonth]}, ${c.currentYear}`);
        },
      },
    });
  }
  onPageBeforeRemove() {
    const self = this;
    self.calendarDefault.destroy();
    self.jcalendarDefault.destroy();
    self.calendarDateFormat.destroy();
    self.calendarMultiple.destroy();
    self.calendarRange.destroy();
    self.calendarModal.destroy();
    self.calendarInline.destroy();
  }
};

{'fraction_non_alphanumeric': 0.14986301369863014, 'fraction_numerical': 0.00036529680365296805, 'mean_word_length': 2.2965081276339556, 'pattern_counts': {'":': 0, '<': 165, '<?xml version=': 0, '>': 169, 'https://': 0, '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': '7545774', 'n_tokens_mistral': 3165, 'n_tokens_neox': 3106, 'n_words': 679}