初記事+自分用メモのため、ハードルを下げて書きます。
情報不足・著作権的にNGなどあれば教えていただきたく存じます。

発端

C# .NETを使用したスケジュールシステムを作成することになった。
クライアントの要望が「見た目を最新に、きれいに！」とのことだったので
ASP.NETを使用し、フロント側でTOAST UIを利用することにした。

TOASTでは新規スケジュールを作成するモーダルが予め用意されているが、
業務の要件上、モーダルの項目を変更して利用したかった。

↓TOASTで用意されている新規スケジュール作成モーダル

が、モーダルのhtmlソースを追ったところ
tui-calendar.jsのソース上で動的に生成してるっぽかったので
早々にカスタム諦めて自作のモーダルを表示する方針に切り替えた。

実装

モーダル作成

まずはモーダルを作成。
今回はjqueryを使用するため、予めインストールしておく。

Sample.aspx

<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>

modal.js

$(function () {
    $('.js-modal-open').on('click', function () {
        $('.js-modal').fadeIn();
        return false;
    });

    $('.js-modal-close').on('click', function () {
        $('.js-modal').fadeOut();
        return false;
    });
});

questionnaire_aggregate.css

/* モーダルウィンドウ */
*{
  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を設定する。

app.js

var cal = new Calendar('#calendar', {
    useCreationPopup: false,
    useDetailPopup: false,
...
});

自作したモーダルを「'beforeCreateSchedule': function(e)」から呼び出す。

app.js

// 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を改修したもの）

以上