初記事+自分用メモのため、ハードルを下げて書きます。
情報不足・著作権的にNGなどあれば教えていただきたく存じます。
発端
C# .NETを使用したスケジュールシステムを作成することになった。
クライアントの要望が「見た目を最新に、きれいに！」とのことだったので
ASP.NETを使用し、フロント側でTOAST UIを利用することにした。
TOASTでは新規スケジュールを作成するモーダルが予め用意されているが、
業務の要件上、モーダルの項目を変更して利用したかった。
↓TOASTで用意されている新規スケジュール作成モーダル
が、モーダルのhtmlソースを追ったところ
tui-calendar.jsのソース上で動的に生成してるっぽかったので
早々にカスタム諦めて自作のモーダルを表示する方針に切り替えた。
実装
モーダル作成
まずはモーダルを作成。
今回はjqueryを使用するため、予めインストールしておく。
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>modal</title>
<link rel="stylesheet" type="text/css" href="./Content/questionnaire_aggregate.css"/>
<script src="./Scripts/jquery-3.5.1.js"></script>
<script src="./Scripts/modal.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="modal js-modal">
<div class="modal__bg js-modal-close"></div>
<div class="modal__content">
<asp:Label ID="ModalTantoshaLabel" runat="server" Text="担当者"></asp:Label>
<asp:TextBox ID="ModalTantoshaTextBox" runat="server"></asp:TextBox>
<br />
<asp:Label ID="ModalDenwaBangoLabel" runat="server" Text="電話番号"></asp:Label>
<asp:TextBox ID="ModalDenwaBangoTextBox" runat="server"></asp:TextBox>
<br />
<asp:Label ID="ModalFaxBangoLabel" runat="server" Text="FAX番号"></asp:Label>
<asp:TextBox ID="ModalFaxBangoTextBox" runat="server"></asp:TextBox>
<br />
<asp:Label ID="ModalKeitaiBangoLabel" runat="server" Text="携帯番号"></asp:Label>
<asp:TextBox ID="ModalKeitaiBangoTextBox" runat="server"></asp:TextBox>
<br />
<asp:Label ID="ModalEMailLabel" runat="server" Text="E-Mail"></asp:Label>
<asp:TextBox ID="ModalEMailTextBox" runat="server"></asp:TextBox>
<br />
<asp:Button ID="ModalTorokuButton" runat="server" Text="登録" />
<asp:Button ID="ModalShuryoButton" runat="server" Text="終了" />
<a class="js-modal-close" href="">閉じる</a>
</div><!--modal__inner-->
</div><!--modal-->
</form>
</body>
$(function () {
$('.js-modal-open').on('click', function () {
$('.js-modal').fadeIn();
return false;
});
$('.js-modal-close').on('click', function () {
$('.js-modal').fadeOut();
return false;
});
});
/* モーダルウィンドウ */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.content{
margin: 0 auto;
padding: 40px;
}
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
}
.modal__bg{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal__content{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
}
jsで「$('.js-modal').fadeIn();」を呼び出せばモーダルが表示される。
TOASTスケジュールからモーダルを表示
TOASTのGetting Startedに自作のモーダル画面を表示する方法が記載してある。
参照：https://github.com/nhn/tui.calendar/blob/master/docs/getting-started.md#customize-popups
（Customize Popupsのところ）
app.jsのuseCreationPopup、useDetailPopupにfalseを設定する。
var cal = new Calendar('#calendar', {
useCreationPopup: false,
useDetailPopup: false,
...
});
自作したモーダルを「'beforeCreateSchedule': function(e)」から呼び出す。
// event handlers
cal.on({
'clickSchedule': function(e) {
console.log('clickSchedule', e);
},
'beforeCreateSchedule': function(e) {
console.log('beforeCreateSchedule', e);
// open a creation popup
// 作成したモーダルを開く
$('.js-modal').fadeIn();
// If you dont' want to show any popup, just use `e.guide.clearGuideElement()`
// モーダル開きたくなかったら「e.guide.clearGuideElement()」を使うべし
// e.guide.clearGuideElement();
},
...
});
スケジュールの空き部分を押下すると元々のモーダルは表示されず、
作成したモーダルが表示される。
（画像はTOASTのGitHubにあるexample00-basic.htmlを改修したもの）
以上