javascript - 根据视口(viewport)宽度更改 fullCalendar View 和标题选项？

coder 2024-07-23 原文

fullCalendar是一个 jquery 日历插件。我用它来显示来自一个谷歌日历的数据。

我有两个视口(viewport)宽度断点，我希望默认日历 View 和日历标题选项的组合不同。

视口(viewport)小于 700 像素:

默认 View 应该是 agendaDay 并且应该没有标题按钮选项可用于更改 View ，例如 agendaWeek 或 month .

大于 700 像素的视口(viewport):

默认 View 应该是 agendaWeek 并且应该有标题按钮可供选择不同的 View (例如 agendaDay 和 month 以及默认 View agendaWeek View )。

我有用于日历 View 和标题选项的较大视口(viewport)组合的工作代码(见下文)。

我的问题是，如果视口(viewport)宽度低于 700 像素，javascript 将呈现没有标题选项的 agendaDay 的默认 View ，或者带有标题选项的 agendaWeek 的默认 View 如果视口(viewport)宽度为 700 像素或更大，如何更改 View ？

<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/moment/moment.js"></script>
<script src="/libs/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="/libs/fullcalendar/dist/gcal.js"></script>
<script>
  $('#calendar').fullCalendar({
    googleCalendarApiKey: 'key',
    events: {
      googleCalendarId: 'id'
    },
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay,agendaWeek,month'
    },
    eventBackgroundColor: 'transparent',
    eventBorderColor: '#08c',
    eventTextColor: 'black',
    height: 'auto',
    defaultView: 'agendaWeek',
    allDaySlot: false,
  });
</script>

注意事项

在上面的代码中，right: "agendaDay,agendaWeek,month" key:value 对呈现标题 View 选项按钮，我想在断点下删除宽度700 像素。
This stack overflow post有点相关，但仅着眼于根据视口(viewport)宽度更改默认 View 。

最佳答案

Fullcalendar 无法在初始化后更改其选项。所以你有两个选择:

使用 CSS 有条件地隐藏按钮。
当大小更改超过 700 像素标记时，使用新选项销毁并重新创建 FC。

此外，source .

销毁和重建示例

var $fc = $("#calendar");

var options = { // Create an options object
  googleCalendarApiKey: 'key',
  events: {
    googleCalendarId: 'id'
  },
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'agendaDay,agendaWeek,month'
  },
  eventBackgroundColor: 'transparent',
  eventBorderColor: '#08c',
  eventTextColor: 'black',
  height: 'auto',
  defaultView: 'agendaWeek',
  allDaySlot: false,
}
$fc.fullCalendar(options);

function recreateFC(screenWidth) { // This will destroy and recreate the FC taking into account the screen size
  if (screenWidth < 700) {
    options.header = {
      left: 'prev,next today',
      center: 'title',
      right: ''
    };
    options.defaultView = 'agendaDay';
  } else {
    options.header = {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay,agendaWeek,month'
    };
    options.defaultView = 'agendaWeek';
  }
}

$(window).resize(function (e) { //set window resize listener
  recreateFC($(window).width()); //or you can use $(document).width()
});

这是一个完整的示例:http://jsfiddle.net/slicedtoad/kjponpf1/6/

关于javascript - 根据视口(viewport)宽度更改 fullCalendar View 和标题选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28111602/

fullCalendar javascript 39 code agendaWeek jquery responsive-design

有关javascript - 根据视口(viewport)宽度更改 fullCalendar View 和标题选项？的更多相关文章

ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2
如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？最佳答案我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设
ruby - 默认情况下使选项为 false - 2
这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby - Capistrano 3 在任务中更改 ssh_options - 2
我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
ruby - 更改 ActiveRecord 中对象的类 - 2
假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。
ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2
我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的
ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

javascript - 根据视口(viewport)宽度更改 fullCalendar View 和标题选项？

有关javascript - 根据视口(viewport)宽度更改 fullCalendar View 和标题选项？的更多相关文章

随机推荐