YNICTE/FO/Views/Course/OffList.cshtml

@model NP.Model.VMCourse
@{
    Layout = null;
}
<style>
    .clsPopWrap {
        max-width : 750px;
    }
</style>
<div class="offMonth">
    <ul>
        <li><a href="#" onclick="viewmonth(1)">1월</a></li>
        <li><a href="#" onclick="viewmonth(2)">2월</a></li>
        <li><a href="#" onclick="viewmonth(3)">3월</a></li>
        <li><a href="#" onclick="viewmonth(4)">4월</a></li>
        <li><a href="#" onclick="viewmonth(5)">5월</a></li>
        <li><a href="#" onclick="viewmonth(6)">6월</a></li>
        <li><a href="#" onclick="viewmonth(7)">7월</a></li>
        <li><a href="#" onclick="viewmonth(8)">8월</a></li>
        <li><a href="#" onclick="viewmonth(9)">9월</a></li>
        <li><a href="#" onclick="viewmonth(10)">10월</a></li>
        <li><a href="#" onclick="viewmonth(11)">11월</a></li>
        <li><a href="#" onclick="viewmonth(12)">12월</a></li>
    </ul>
</div>

<div class="offDesc">
    <a href="#" onclick="viewmonth(0)">올해일정 조회</a>
</div>
@foreach (var m in Model.CMs.Select(s => s.sstime.Value.Month).Distinct())
{
    <div class="offList month@(m) @(DateTime.Now.Month == m ? "current":"")" style=@(DateTime.Now.Month==m?"":"display:none;")>
        <h5>@(m)월 교육일정</h5>
        @foreach (var d in Model.CMs.Where(w => w.sstime.Value.Month == m))
        {
            <ul class="schList">
                <li>
                    <h4 style="@((DateTime.Now < d.rstime.Value || DateTime.Now >= d.retime.Value) ? "color:#888;" : "")" )>
                        @string.Format("{0}({1})", d.sstime.Value.Day, d.sstime.Value.ToString("ddd", System.Globalization.CultureInfo.CreateSpecificCulture("ko-KR")))
                        ~
                        @string.Format("{0}({1})", d.setime.Value.Day, d.setime.Value.ToString("ddd", System.Globalization.CultureInfo.CreateSpecificCulture("ko-KR")))
                    </h4>
                    <div>
                        <h6 style="cursor:pointer; @((DateTime.Now < d.rstime.Value || DateTime.Now >= d.retime.Value) ? "color:#888;" : "")">
                            @if (d.cshape == 1)
                            {
                                <span class="blu" style="@((DateTime.Now < d.rstime.Value || DateTime.Now >= d.retime.Value) ? "color:#888;" : "")">[교육장교육]</span>
                            }
                            else
                            {
                                <span class="blu" style="@((DateTime.Now < d.rstime.Value || DateTime.Now >= d.retime.Value) ? "color:#888;" : "")">[혼합교육]</span>
                            }
                            <a href="#" onclick="javascript:openIntro(@d.cmno);">@d.cname</a>
                        </h6>
                    </div>
                    @if (DateTime.Now >= d.rstime.Value && DateTime.Now < d.retime.Value)
                    {
                        if (d.quota - d.lectcnt <= 0)
                        {
                            <span class="smtlChkBtn smtlChk04">대기접수</span>
                        }
                        else
                        {
                            <span class="smtlChkBtn smtlChk01">신청가능</span>
                        }
                    }
                    else
                    {
                        <span class="smtlChkBtn smtlChk04">종료</span>

                    }
                </li>
            </ul>
        }
    </div>
}

<div class="clsPop" id="divIntro" style="display:none">
    <div>
        <div>
            <div class="clsPopWrap">
                <div class="clsPopTitle">
                    <h5>강좌소개</h5>
                    <a href="#" onclick="javascript: closeIntro();"></a>
                </div>
                <div class="clsPopCont">
                    <ul class="smtList pop">
                        <li>
                            <div class="smtlCont">
                                <h5><span id="spnCmTitle"></span></h5>
                                <div class="gry">
                                    <p>기술인분류 : <span id="spnTypeMan"></span></p>
                                    <p>교육목적 : <span id="spnTypeEdu"></span></p>
                                    <p>현재등급 : <span id="spnTypeGrade"></span></p>
                                    <p>직무분야 : <span id="spnTypeJob"></span></p>
                                    <p>인정시간 : <span class="sky"><span id="spnCmStudyHour"></span></span>시간</p>
                                    <p>수료기준 : 진도 <span id="spnCmAttend"></span>%, 시험 <span id="spnCmFinal"></span>%</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <dl class="fairIntro">
                        <dt>강사정보</dt>
                        <dd><span id="spnCmUsername"></span></dd>
                    </dl>
                    <dl class="fairIntro">
                        <dt>강좌소개</dt>
                        <dd><span id="spnCmIntroHtml"></span></dd>
                    </dl>
                </div><!-- clsPopCont -->
            </div><!-- clsPopWrap -->
        </div>
    </div>
</div>

<form id="smartSearchForm" method="post">
    @Html.HiddenFor(m => m.cmno)
</form>
<script type="text/javascript" src="/js/sly.min.js"></script>
<script>
    $(function () {
        var $frame = $('.offMonth');
        var $slidee = $frame.children('ul').eq(0);
        var $wrap = $frame.parent();
        $frame.sly({
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: @(DateTime.Now.Month - 1), // 1월 = 0, 2월 = 1, 3월 = 2 이런식으로 증가해야합니다.
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            clickBar: 1
        });
        $(window).resize(function () {
            $frame.sly('reload');
        });
    });
    function viewmonth(m) {
        $(".offList").show();
        if (m > 0) {
            $(".offList").hide();
            $(".offList.month" + m).show();
            $(".offDesc").find("a").attr("class", "");
        } else {
            $(".offDesc").find("a").attr("class", "current");
        }
    }

    function openIntro(cmno) {
        $("#divIntro").show();
        capp("/focommon/getcmuser", { cmno: cmno }, "renderCm");
    }
    function renderCm() {
        //var cmkind;
        //cmkind = typeman + " | " + typeedu + " | " + typegrade + " | " + typejob;
        //if ($("#stringval").val() == "1") {
        //    cmkind = $("#stringval3").find("option:selected").text();
        //}

        $.each(capResult.obj, function (i, d) {
            $("#spnCmTitle").text(d.text);
            $("#spnTypeMan").text(d.typemans);
            $("#spnTypeEdu").text(d.typeedus);
            $("#spnTypeGrade").text(d.typegrades);
            $("#spnTypeJob").text(d.typejobs);
            $("#spnCmStudyHour").text(d.studytime);
            $("#spnCmAttend").text(d.attendcut);
            $("#spnCmFinal").text(d.finalcut);
            $("#spnCmUsername").text(d.username);
            if (d.introhtml != null && d.introhtml != "" && d.introhtml != undefined) {
                $("#spnCmIntroHtml").text(d.introhtml.replace(/(<([^>]+)>)/ig, ""));
            }
        });
    }
    function closeIntro() {
        $("#divIntro").hide();
    }
</script>