ムーバブル対応にデフォルトでカレンダー自体は設置できるんですが
使い勝手や今回のクライアント様の要望もあり今回以下のカレンダープラグインを使用させてもらいました。
jQueryのFullCalendarを使用して開発されたもので商用利用の場合は有料です。
ただ3000円程度なので意外と使用している方は多いと思います。
【URL】イベントカレンダープラグイン
で、このカレンダーを実装して今回ぶち当たった壁が次のこと。
・カレンダーに表示されている項目にリンクが必要なものと必要ないものがある。
・シングルページが存在しないのでクリックするとエラーページとなってしまう。
・特定の項目のみリンクが貼られないようにしたい。
実装した時にすべてのイベントカレンダーの項目にリンクが貼られてしまい
removeなどを使用してJSで制御しようにもなぜがaタグを指定すると無視されてしまいました。
ということで強制的にaタグを外すソースをシステマーさんから教えていただいたので
紹介します。
さっそくソースから！
$(document).ready(function() {
$('#globalNav > nav > ul > li > a').bind('click',function(){window.location.href = $(this).attr('href');});
var clearLinkInterval=setInterval(
function(){
if($("#eventArchive #calendar .fc-event-container a.question,#eventArchive #calendar .fc-event-container a.close").length>0){
$("#eventArchive #calendar .fc-event-container a.question,#eventArchive #calendar .fc-event-container a.close").off().bind('click',function(){return false;}).attr('href','#');
//clearInterval(clearLinkInterval);
}},50);});
うまいこと説明ができなくて申し訳ないのですが、上記のソースについての解説は以下。
①システム的に構築したらまずイベントを50ミリ秒ごとにすべて無効にする
②#eventArchive #calendar .fc-event-container a.question,#eventArchive #calendar .fc-event-container a.close が0以上あった場合
#eventArchive #calendar .fc-event-container a.question,#eventArchive #calendar .fc-event-container a.close”).off() をオフにする
③(‘click’,function(){return false;}). を記述することでブラウザが持っているデフォの機能を無効にする
②attr(‘href’,’#’);は念のためにホバーしたときにURLを出さないようにするため
今回は特定のaタグにクラスをつけていたためa.questionやa.closeという記述になります。
力技ではあるらしいのですが同じように困っている方の参考になればと幸いです！
ぜひ試してみてください(*’ω’*)