已交付的输出

Question

我在应用程序中使用ember-power-calendar插件来避免ember-bootstrap date-picker，因为它具有jQuery小部件。日历工作正常。但是我有一个需要在工作日标题（星期日，星期一..星期六）中隐藏的地方。

{{#power-calendar
  center=fixedDummyDate
  selected=fixedDummyDate
  onSelect=(action 'selectDate' value='date') 
  as |calendar|}}
    {{calendar.days}} 
{{/power-calendar}}

已交付的输出

预期产量

Answer 1

实际上，官方指南中的示例与您所要求的类似。您是否在Basic-customization>days link上查看了示例。

说；让我解释一下您将如何解决该问题。您需要从日历中消除说周日和星期一。您需要自定义days-component中的power-calendar。为了做到这一点；您可以传递自己的组件；假设自定义组件的名称为days-without-monday-sunday。那么您对power-calendar的用法将是：

{{#power-calendar
    center=fixedDummyDate
  selected=fixedDummyDate
  onSelect=(action 'selectDate' value='date')
  daysComponent="days-without-monday-sunday"
  as |calendar|}}
    {{calendar.days}} 
{{/power-calendar}}

现在；让我们考虑一下自定义days-without-monday-sunday。我们可以重用插件中现有的power-calendar/days组件。我们需要从星期标题行中删除Sunday和Monday。因此，让我们定义组件的js文件：

import Days from 'ember-power-calendar/components/power-calendar/days'

export default Days.extend({
    // eliminate monday and sunday from the weekdays already constructed ad power-calendar-days
    weekdaysWithoutMondayAndSunday: Ember.computed('weekdays', function() {
        return this.get('weekdays').slice(2,7)
    })
  });

让我们定义days-without-monday-sunday现在的模板。我们将在标题行中使用weekdaysWithoutMondayAndSunday，并消除Monday和Sunday天的渲染时间：

<div class="ember-power-calendar-row ember-power-calendar-weekdays">
  {{#each weekdaysWithoutMondayAndSunday as |wdn|}}
    <div class="ember-power-calendar-weekday">{{wdn}}</div>
  {{/each}}
</div>
<div class="ember-power-calendar-day-grid" onkeydown={{action "onKeyDown" calendar}}>
  {{#each weeks key='id' as |week|}}
    <div class="ember-power-calendar-row ember-power-calendar-week" data-missing-days={{week.missingDays}}>
      {{#each week.days key='id' as |day|}}
        {{#if (monday-sunday-checker day)}}
          <button type="button"
            data-date="{{day.id}}"
            class="ember-power-calendar-day {{if onSelect 'ember-power-calendar-day--interactive'}} {{if day.isCurrentMonth 'ember-power-calendar-day--current-month' 'ember-power-calendar-day--other-month'}} {{if day.isSelected 'ember-power-calendar-day--selected'}} {{if day.isToday 'ember-power-calendar-day--today'}} {{if day.isFocused 'ember-power-calendar-day--focused'}} {{if day.isRangeStart 'ember-power-calendar-day--range-start'}} {{if day.isRangeEnd 'ember-power-calendar-day--range-end'}}"
            onclick={{action calendar.actions.select day calendar}}
            onfocus={{action 'onFocusDay' day}}
            onblur={{action 'onBlurDay'}}
            disabled={{day.isDisabled}}>
            {{#if hasBlock}}
              {{yield day publicAPI}}
            {{else}}
                {{day.number}}
            {{/if}}
          </button>
        {{/if}}
      {{/each}}
    </div>
  {{/each}}
</div>

不要分心模板的复杂性；我直接从插件本身复制了它； see。消除星期一和星期日的棘手部分是使用{{#if (monday-sunday-checker day)}}。为了做到这一点；我们可以创建一个名为monday-sunday-checker的自定义帮助程序。辅助程序的实现可以是：

import Ember from 'ember';

export function mondaySundayChecker(params/*, hash*/) {
  console.log(params[0]) 
  const day = Ember.get(params[0], 'moment').format('dddd')
  return day !== 'Monday' && day !== 'Sunday';
}

export default Ember.Helper.helper(mondaySundayChecker);

我为您创建了一个twiddle，以说明您的实际操作；但由于缺少css定义，因此看起来不太好；但这至少会给您一个想法。希望这会有所帮助。

Answer 2

目前，我找到了一种将CSS类添加到超级日历的方法，以隐藏工作日标题。

CSS样式：

.no-weekdays {
   .ember-power-calendar-weekdays {     
       display: none;
    }
}

模板：

{{#power-calendar class="no-weekdays"
   selected=abcDate
   onSelect=(action 'selectDate' value='date') 
   as |calendar|}}
   {{calendar.days}}
{{/power-calendar}}

还有其他隐藏标题的方式吗？

在ember-power-calendar下拉菜单中隐藏工作日标题的方法是什么？

已交付的输出

预期产量

2 个答案: