0

我有一个使用https://github.com/nekken/ng2-fullcalendar/下面的库用于我的日历，但是这个库中的选项有限，所以我使用完整的日历 api 来扩展以满足业务需求。

所以这里是函数 Viewrender 实现功能，当跨越未来一个月和前一个月时禁用上个月和下个月按钮。

例如）当当前月份是 2018 年 11 月时，按钮应该被禁用 - 如果用户点击 JAn 2019 下一个按钮应该禁用并且用户选择 2018 年 9 月上一个按钮应该被禁用。

我在 angularr 函数中的 jquery 中编写了一个逻辑，任何人都可以将其转换为 angular 6 方式。

onViewRender(view, element) {
    // alert(view.intervalStart);
    // alert(view.intervalEnd);
    // alert(view.start);
    // alert(view.end);
    // alert(view.title);
    // console.log(view.intervalStart); 
    // console.log(view.intervalEnd); 
    var now = new Date(); 
    var end = new Date();
    end.setMonth(now.getMonth() + 1); 

    console.log( view.start.format('MM'));//11
    console.log(view.start.format('YYYY'));//2018

    var cal_date_string = view.start.format('MM')+'/'+view.start.format('YYYY');
    var cur_date_string = now.getMonth()+'/'+now.getFullYear();
    var end_date_string = end.getMonth()+'/'+end.getFullYear();

    if(cal_date_string == cur_date_string) { jQuery('.fc-prev-button').addClass("fc-state-disabled"); }
    else { jQuery('.fc-prev-button').removeClass("fc-state-disabled"); }

    if(end_date_string == cal_date_string) { jQuery('.fc-next-button').addClass("fc-state-disabled"); }
    else { jQuery('.fc-next-button').removeClass("fc-state-disabled"); }
  }

Stackblitz 演示： 演示

4

1 回答 1

0

最简单的方法是使用NgClass。

您在控制器内部创建一个booleants 代码isPrevButtonEnabled和isNextButtonEnabled（类成员）。

在您的组件中，您放入.fc-prev-button元素中：

[ngClass]="{ 'fc-state-disabled': !isPrevButtonEnabled }"

您的下一步按钮也是如此。

在您的 ts 代码中，您只需使用：

isPrevButtonEnabled = cal_date_string !== cur_date_string;

NextButton 也是如此。

编辑：

如果您无法修改组件代码，只需使用以下内容来检索 DOM 元素：document.getElementsByClassName("fc-prev-button");.

但请注意，如果元素尚未在 DOM 中创建，则可能是错误的。使用OnAfterViewInit，你应该没问题。

于 2018-11-10T13:41:11.397 回答