我有以下代码来显示三个 devexpress 下拉菜单、日历控件和一个 devexpress 时间表。这些控件是通过 Bootstrap 应用的。这是我的 MVC 的 View ，它具有这些控件。我试图标记日历控件，但这使得它更难阅读，所以我删除了评论。请在 DateNavigator() 控件部分搜索日历
@{
ViewBag.Title = "Scheduler";
}
<style>
.label-text
{
font-size: 12px;
font-weight: normal;
padding-top: 10px;
}
.left {
float: left;
width: 125px;
text-align: left;
margin: 2px 10px;
display: inline
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline
}
</style>
<style>
/*.form-control {
}*/
</style>
<script>
$(document).ready(function () {
// $('#accordion').css('position', 'relative');
// alert('ready');
$("#demo").on("hide.bs.collapse", function () {
$(".btn").html(' <span style="float:left;">Calendar</span><span class="glyphicon glyphicon-menu-down" style="float:right"></span>');
});
$("#demo").on("show.bs.collapse", function () {
$(".btn").html('<span style="float:left;">Calendar</span><span class="glyphicon glyphicon-menu-up" style="float:right"></span>');
});
});
$(document).load(function () {
// alert('ready');
});
</script>
<script type="text/javascript">
var SelectedResources = "";
var SelectedResourcesLookup = "";
function OnBeginCallback(s, e) {
//alert('called');this gets called selected date, months, year changes, when new appointment and other contextmenu items changes
// scheduler.GetVisibleIntervals()[0].start
// Thu Jan 07 2016 00:00:00 GMT-0600 (Central Standard Time)
//(index):42 NewAppointment
// e.command
// "MNUVIEW|NewAppointment"
// (index):42 NewAppointment
// scheduler.GetActiveViewType()
// "Day"
//if (args.Contains())
//
//if (args.Contains("OFFSETVISI"))
// selectedDate = Convert.ToDateTime(args.Split(',')[args.Split(',').Length - 1]);
var dt = new Date();
var selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
//if ((e.command.indexOf("NewAppointment") > -1) || (e.command.indexOf("Month") > -1) || (e.command.indexOf("APTSAVE") > -1)) {
// dt = new Date(scheduler.GetVisibleIntervals()[0].start);
// selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
//}
if ((e.command.indexOf("SETVISDAYS") > -1))
selectedDate = e.command.split('|')[1];
else if ((e.command.indexOf("OFFSETVISI") > -1))
selectedDate = e.command.split(',')[e.command.split(',').length - 1]
else if ((e.command.indexOf("Month") > -1)) {
dt = new Date(scheduler.GetVisibleIntervals()[0].start);
selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
}
else if ((e.command.indexOf("WorkWeek") > -1)) {
dt = new Date(scheduler.GetVisibleIntervals()[0].start);
selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
}
else {
dt = new Date(scheduler.GetVisibleIntervals()[0].start);
selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
}
//dateNavigator.GetFirstDate() dateNavigator.GetLastDate() gridLookup.gridView.GetSelectedFieldValues("FacID", OnGetSelectedFieldValues)
//e.customArgs['SelectedResources'] = checkListBox.GetSelectedValues().join(';'); SelectedResourcesLookup SelectedResourcesLookup
e.customArgs['SelectedResources'] = SelectedResources;
e.customArgs['SelectedDate'] = selectedDate;
e.customArgs['SelectedResourcesLookup'] = SelectedResourcesLookup.toString();
e.customArgs['timeZoneId'] = $('#timeZoneEdit_cmd_VI').val();
}
function validateAppointment(s, e) {
/*
$.ajax({
url: '/Home/ValidateAppointment',
type: 'POST',
dataType: 'json',
data: { startTime: new Date().toUTCString(), scheduleDetailID : 2030 },
success: function (result) {
if (result == false)
alert('appointment not exits');
else
alert('appointment exits');
}
});*/
AppointmentType.HideDropDown();
}
//function disableMenuItems(menu, args) {
// var item = menu.GetItemByName("GotoToday");
// if (item) {
// item.SetEnabled(false);
// }
//}
// ------------------------------------Resource select Lookup-------------------------------------------
function CloseResourceGridLookup() {
gridLookupResource.ConfirmCurrentSelection();
gridLookupResource.HideDropDown();
}
function OngridLookupResourceSelectionChanged(s, e) {
//gridLookupResource.gridView.GetSelectedFieldValues("PartyRoleID", OnResourceGetSelectedFieldValues);
SelectedResourcesLookup = gridLookupResource.GetValue();
scheduler.PerformCallback();
}
//function OnResourceGetSelectedFieldValues(selectedValues) {
// SelectedResourcesLookup = "";
// if (selectedValues.length == 0) {
// scheduler.PerformCallback();
// return;
// } else {
// alert(selectedValues.length);
// for (i = 0; i < selectedValues.length; i++) {
// SelectedResourcesLookup = SelectedResourcesLookup + selectedValues[i] + ";";
// }
// scheduler.PerformCallback();
// }
//}
//// ------------------------------------Resource select Lookup-------------------------------------------
// ------------------------------------Patient Multiselect Lookup-------------------------------------------
function SelectedPatient(s, e) {
var g = patientgridLookup.GetGridView();
//if (g.GetFocusedRowIndex() >= 0) {
// alert("rows selected");
//}
//else {
// alert("rows NOT selected");
//}
var valor = g.GetRowKey(g.GetFocusedRowIndex());
// alert('selected by mouse:'+valor);
$('#PatientPartyRoleID').val(valor);
ClosePatientGridLookup();
}
function TestSelection(s, e) {
alert('hello');
}
function OnValueChange(s, e) {
alert('selected by auto select: '+s.getValue());
}
function ClosePatientGridLookup() {
// alert('close patient grid');
patientgridLookup.ConfirmCurrentSelection();
patientgridLookup.HideDropDown();
}
// ------------------------------------Patient Multiselect Lookup-------------------------------------------
// ------------------------------------Multiselect Lookup-------------------------------------------
function ResourcePerformCall(s, e)
{
ResourceDataLoad();
CloseGridLookup()
}
function CloseGridLookup() {
gridLookup.ConfirmCurrentSelection();
gridLookup.HideDropDown();
//alert('close patient grid');
}
function OnGridLookupSelectionChanged(s, e)
{
gridLookup.gridView.GetSelectedFieldValues("FacID", OnGetSelectedFieldValues);
}
function OnGetSelectedFieldValues(selectedValues) {
SelectedResources = "";
if (selectedValues.length == 0) {
scheduler.PerformCallback();
return;
} else {
for (i = 0; i < selectedValues.length; i++) {
SelectedResources = SelectedResources + selectedValues[i] + ";";
}
scheduler.PerformCallback();
}
//ResourceDataLoad();
}
function ResourceDataLoad()
{
var grid = gridLookupResource.GetGridView();
grid.PerformCallback();
}
// ------------------------------------Multiselect Lookup-------------------------------------------
function OnAppointmentFormSave(s, e) {
if (IsValidAppointment())
scheduler.AppointmentFormSave();
}
function IsValidAppointment() {
$.validator.unobtrusive.parse('form');
return $("form").valid();
}
function OnInplaceCloseButtonClick(s, e) {
scheduler.InplaceEditFormCancel();
}
function OnSaveInplaceFormData(s, e) {
if (IsValidAppointment())
scheduler.InplaceEditFormSave();
}
function OnInplaceFormMoreButtonClick(s, e) {
scheduler.InplaceEditFormShowMore();
}
function OnAppointmentFormCancel(s, e) {
scheduler.AppointmentFormCancel()
}
function OnAppointmentFormDelete(s, e) {
scheduler.AppointmentFormDelete();
}
//tooltip
var toolTipContext;
function OnToolTipDisplaying(s, e) {
toolTipContext = e;
switch (e.toolTip.type) {
case MVCxSchedulerToolTipType.Appointment:
OnAppointmentTipDisplaying(s, e);
break;
case MVCxSchedulerToolTipType.AppointmentDrag:
OnAppointmentDragTipDisplaying(s, e);
break;
case MVCxSchedulerToolTipType.Selection:
OnSelectionTipDisplaying(s, e);
break;
}
}
// ------------------------------------Appointment Type Dropdown-------------------------------------------
var textSeparator = ";";
function OnAppointmentTypeSelectionChanged(listBox, args) {
AppointmentTypeUpdateText();
SetEndDate(listBox, args);
}
function SetEndDate(listBox, e) {
var aptTypeList = $('#typeList').val().split(',');
var mins = 0;
$.each(listBox.GetSelectedItems(), function (index, item) {
mins += parseInt(aptTypeList[item.index]);
});
var startdate = new Date(StartTime.GetDate());
EndTime.SetDate(new Date(startdate.getTime() + mins * 60000));
}
function AppointmentTypeUpdateText() {
var selectedItems = checkListAppointmentTypeID.GetSelectedItems();
AppointmentType.SetText(GetSelectedAppointmentTypeText(selectedItems));
$('#AppointmentTypeIDList').val(GetSelectedAppointmentTypeValue(selectedItems));
}
function SynchronizeAppointmentTypeValues(dropDown, args) {
checkListAppointmentTypeID.UnselectAll();
var texts = dropDown.GetText().split(textSeparator);
var values = GetAppointmentTypeValuesByTexts(texts);
checkListAppointmentTypeID.SelectValues(values);
AppointmentTypeUpdateText(); // for remove non-existing texts
}
function GetSelectedAppointmentTypeText(items) {
var texts = [];
for (var i = 0; i < items.length; i++)
texts.push(items[i].text);
return texts.join(textSeparator);
}
function GetSelectedAppointmentTypeValue(items) {
var texts = [];
for (var i = 0; i < items.length; i++)
texts.push(items[i].value);
return texts.join(textSeparator);
}
function GetAppointmentTypeValuesByTexts(texts) {
var actualValues = [];
var item;
for (var i = 0; i < texts.length; i++) {
item = checkListAppointmentTypeID.FindItemByText(texts[i]);
if (item != null)
actualValues.push(item.value);
}
return actualValues;
}
function OnAppointmentTypeSelectedIndexChanged(s, e) {
var aptTypeList = $('#typeList').val().split(',');
var mins = 0;
if (aptTypeList[s.GetSelectedIndex()]) {
mins = parseInt(aptTypeList[s.GetSelectedIndex()]);
$('#AppointmentTypeID').val(s.GetSelectedItem().value);
}
var startdate = new Date(StartTime.GetDate());
EndTime.SetDate(new Date(startdate.getTime() + mins * 60000));
}
// ------------------------------------Appointment Type Dropdown-------------------------------------------
</script>
<style>
.test {width: 225px !important;}
.timezonecss-class {height:30px !important;}
</style>
@using System.Web.UI.WebControls
@model CareHere.WebUI.Scheduler.Models.SchedulerDataObject
<div class="row" style="border:0px solid red;padding-left:4px;padding-top:5px;padding-right:4px;">
<div class="col-sm-7" style="border:0px solid green;padding:0px;width:800px;">
@* <h3 class="display-4">Scheduler</h3><br />*@
<div class='form-group left' style="border:0px solid blue;padding-left:0px;padding-right:0px;width:300px;margin-left:0px;">
<label class="form-group" for="timeZoneEdit" >Time Zone</label>
@Html.DevExpress().TimeZoneEdit(
settings =>
{
settings.Name = "timeZoneEdit";
settings.SchedulerName = "scheduler";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(300);
//settings.Attributes.CssStyle.Add("font-weight", "large");
settings.ControlStyle.CssClass = "timezonecss-class";
//settings.Width = 300;
}).GetHtml()
</div>
<div class='form-group right' style="border:0px solid blue;padding-right:0px;padding-left:0px;width:228px;margin-left:2px;">
<label for="timeZoneEdit">Select Clinic</label>
@{
ViewBag.Facility = Model.Facility;
}
@Html.Partial("_MultiSelectPartial", Model)
</div>
<div class='form-group right' style="border:0px solid yellow;padding-right:0px;padding-left:0px;width:228px;margin-left:1px;">
<label for="timeZoneEdit">Select Provider</label>
@{
ViewBag.Resources = Model.Resources;
}
@Html.Partial("_ResourceMultiSelectPartial", Model.Resources)
</div>
</div>
<div class="panel-group" id="accordion" style="margin-left:880px;margin-top:26px;width:458px;padding:0px;border:0px solid black;">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:456px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse" style="border:0px solid black;padding:0px;width:458px;">
<div class="panel-body" style="padding-left:4px;padding-right:1px;padding-top:0px;padding-bottom:1px;border:0px solid black">
@Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding:0px;border:0px solid black;position:relative;"id="sp1">
<div class="col-sm-12" style="padding:5px;border:0px solid black"">
@Html.Partial("SchedulerPartial", Model)
</div>
</div>
<script>
</script>
正如在 this video 上看到的那样，当我调整浏览器窗口大小时，日历面板向右移动，而不是固定在浏览器的右边缘。因此，响应能力消失了。我该如何解决这个问题，以便无论浏览器大小如何调整，控件都将在右边缘可见
谢谢
最佳答案
您应该查找媒体查询。基本上，您应该避免使用 javascript 使您的页面响应，因为它只会让您的页面“更重”。
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
关于css - 如何使面板控件响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36170413/