1
ASP.NET MVC에서 특정 날짜에 SQL 데이터베이스에 저장된 내용을 기준으로 매일 앵커 링크를 동적으로 추가하는 달력을 만들고 있습니다. 너비와 같은 형식으로 table-responsive 클래스와 html 테이블을 사용하고 있습니다.테이블 응답으로 부트 스트랩 정렬 문제
기본적으로 모든 열이 표에서 반응적이지만 다소 고정되어 있습니다. col-xs-12에 추가 된 앵커의 수에 따라 오른쪽 그림 (5 일 & 6 이하) 또는 오른쪽에 간격을 추가 할 수 있습니다. 여러 앵커 요소 또는 이벤트가있는 오른쪽 간격은 내 문제입니다. 이 문제를 해결하려면 어떻게해야합니까? 2 개 이상의 버튼에 대해 다른 행을 추가해야합니까? 나는이 문제에 어떻게 접근해야할지 모르겠다. 나는 전문적인 사람이 아니다. 어떤 도움을 주시면 감사하겠습니다. 필요한 다른 파일을 제공 할 수 있습니다.
HTML :
<div id="calendarContainer">
<div class="panel panel-default container-fluid mt25">
<div class="panel-heading row">
<div class="row text-center">
<h2><i class="fa fa-calendar" aria-hidden="true"></i> January 2017</h2>
</div>
<div class="row text-center">
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('12/6/2016 12:00:00 AM')"><i class="fa fa-arrow-left fa-4x pull-left" aria-hidden="true"></i></div>
<div class="col-md-4 col-xs-4">
<div>
<div id="clock" class="">7:44:45 pm</div>
<div>Monday, January 16, 2017</div>
</div>
</div>
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('2/6/2017 12:00:00 AM')">
<i class="fa fa-arrow-right fa-4x pull-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="calendarBody">
<table id="calendarData" class="table table-responsive table-bordered">
<thead>
<tr id="headerRow" class="text-center">
<td class="headerDay text-nowrap">
<span>Sunday</span>
</td>
<td class="headerDay text-nowrap">
<span>Monday</span>
</td>
<td class="headerDay text-nowrap">
<span>Tuesday</span>
</td>
<td class="headerDay text-nowrap">
<span>Wednesday</span>
</td>
<td class="headerDay text-nowrap">
<span>Thursday</span>
</td>
<td class="headerDay text-nowrap">
<span>Friday</span>
</td>
<td class="headerDay text-nowrap">
<span>Saturday</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">2</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/2/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/2/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/2/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/2/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('1/2/2017 12:00:00 AM')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-warning btn-xs mobileReminder" onclick="displayHoliday('1/2/2017 12:00:00 AM')">
<i class="fa fa-bullhorn fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">3</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/3/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/3/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/3/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/3/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('1/3/2017 12:00:00 AM')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">4</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/4/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/4/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">5</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/5/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/5/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/5/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">6</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/6/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/6/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/6/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/6/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">7</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/7/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/7/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modalBodyContainer"></div>
</div>
MVC calendar.cshtml :
<div id="calendarContainer">
<div class="panel panel-default container-fluid mt25">
<div class="panel-heading row">
<div class="row text-center">
<h2><i class="fa fa-calendar" aria-hidden="true"></i> @Model.MonthData.Name @Model.MonthData.Year</h2>
</div>
<div class="row text-center">
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('@Model.CurrentCalendarDate.AddMonths(-1)')"><i class="fa fa-arrow-left fa-4x pull-left" aria-hidden="true"></i></div>
<div class="col-md-4 col-xs-4">
<div>
<div id="clock" class="">loading...</div>
<div>@DateTime.Now.ToString("D", CultureInfo.CreateSpecificCulture("en-US"))</div>
</div>
</div>
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('@Model.CurrentCalendarDate.AddMonths(+1)')">
<i class="fa fa-arrow-right fa-4x pull-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="calendarBody">
<table id="calendarData" class="table table-responsive table-bordered">
<thead>
<tr id="headerRow" class="text-center">
@foreach (var day in Enum.GetValues(typeof(DayOfWeek)).OfType<DayOfWeek>().ToList())
{
<td class="headerDay text-nowrap">
<span>@day.ToString()</span>
</td>
}
</tr>
</thead>
<tbody>
@foreach (var week in Model.MonthData.WeeksInMonth)
{
<tr>
@if (Model.PrefixDays.Any() && week.WeekNumber == Model.MonthData.NumberOfWeeks.First())
{
foreach (var prefixDay in Model.PrefixDays)
{
<td>
@Html.Partial("_EventData", prefixDay)
</td>
}
}
@foreach (var day in week.DaysInWeek)
{
<td class="currentMonthBackground">
@Html.Partial("_EventData", day)
</td>
}
@if (Model.SuffixDays.Any() && week.WeekNumber == Model.MonthData.NumberOfWeeks.Last())
{
foreach (var suffixDay in Model.SuffixDays)
{
<td>
@Html.Partial("_EventData", suffixDay)
</td>
}
}
</tr>
}
</tbody>
</table>
</div>
<div id="modalBodyContainer"></div>
</div>
MVC _eventdata.cshtml 부분보기 : 문제가 해결
@model Common.Calendar.DTODay
<div class="row">
<div class="form-group col-md-8 col-xs-1">
@if (Model.IsCurrentDay)
{
<div class="circle">@Model.DayNumber</div>
}
else
{
<div class="@(Model.IsOtherMonth ? "otherMonthDay" : "currentMonthDay")">@Model.DayNumber</div>
}
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('@Model.FullDate')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('@Model.FullDate')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
@if (Model.ReminderCount > 0 || Model.NoteCount > 0 || Model.BirthdayCount > 0 || Model.Holiday != null)
{
<div class="row">
<div class="col-sm-12">
@if (Model.NoteCount > 0)
{
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('@Model.FullDate')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">@Model.NoteCount</span>
</a>
}
@if (Model.ReminderCount > 0)
{
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('@Model.FullDate')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">@Model.ReminderCount</span>
</a>
}
@if (Model.BirthdayCount > 0)
{
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('@Model.FullDate')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">@Model.BirthdayCount</span>
</a>
}
@if (Model.Holiday != null)
{
<a class="btn btn-warning btn-xs mobileReminder" onclick="displayHoliday('@Model.FullDate')">
<i class="fa fa-bullhorn fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
}
</div>
</div>
}
