根据下拉框选中的用户ID在Full Calendar展示员工上下班时间

Got it, let's get your selected user's login/logout times showing up in FullCalendar. Here's how to adjust your existing code step by step:

1. Track the Selected User ID Across Requests #

First, we'll store the selected user's ID in Session so our calendar can fetch their specific log times later. Update your AttendanceScreen POST action:

[HttpPost]
public ActionResult AttendanceScreen(string ddlCustomers) 
{ 
    List<SelectListItem> userList = Getuser(); 
    if (!string.IsNullOrEmpty(ddlCustomers)) 
    { 
        SelectListItem selectedItem = userList.Find(p => p.Value == ddlCustomers); 
        ViewBag.Message = "Calender for Name: " + selectedItem.Text; 
        ViewBag.Message += "\nID: " + selectedItem.Value; 
        
        // Save selected user ID to Session for calendar requests
        Session["SelectedUserID"] = ddlCustomers;
    }
    else
    {
        // Clear session if no user is selected
        Session["SelectedUserID"] = null;
    }
    return View(userList); 
}

2. Filter Calendar Events by Selected User #

Modify the GetEvents action to only return log times for the selected user, and format the data to match FullCalendar's required structure:

public JsonResult GetEvents() 
{ 
    using (RegMVCEntities dc = new RegMVCEntities()) 
    { 
        dc.Configuration.ProxyCreationEnabled = false; 
        dc.Configuration.LazyLoadingEnabled = false;
        
        var selectedUserID = Session["SelectedUserID"] as string;
        IQueryable<User_LogTime> eventsQuery = dc.User_LogTime;
        
        // Filter events to only the selected user (if one is chosen)
        if (!string.IsNullOrEmpty(selectedUserID))
        {
            int userId = int.Parse(selectedUserID);
            eventsQuery = eventsQuery.Where(l => l.UserId == userId);
        }
        
        // Map database records to FullCalendar's event format
        var calendarEvents = eventsQuery.Select(l => new 
        {
            id = l.LogId, // Replace with your actual log ID property
            title = $"{l.tblRegistration.FName}'s Shift", // Show user's name in event title
            start = l.LoginTime,
            end = l.LogoutTime,
            allDay = false // These are specific time-based shifts, not all-day events
        }).ToList();
        
        return new JsonResult { Data = calendarEvents, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
    } 
}

Note: Replace LogId with the primary key property from your User_LogTime table if it's named differently.

3. Refresh Calendar on User Selection #

Update your view's JavaScript to initialize FullCalendar and refresh it when a new user is selected. Add this script to your AttendanceScreen view:

<script>
    $(document).ready(function() {
        // Initialize calendar on page load
        initializeCalendar();
    });

    function initializeCalendar() {
        $('#calender').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false, // Set to true if you want to allow shift editing
            events: '/Home/GetEvents', // URL to your GetEvents action
            eventClick: function(event) {
                // Show shift details in your existing modal
                $('#eventTitle').text(event.title);
                $('#pDetails').html(
                    '<strong>Login Time:</strong> ' + moment(event.start).format('YYYY-MM-DD HH:mm') + '<br>' +
                    '<strong>Logout Time:</strong> ' + moment(event.end).format('YYYY-MM-DD HH:mm')
                );
                $('#myModal').modal('show');
            }
        });
    }

    // Handle form submission without reloading the page
    $('form').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        $.post(form.attr('action'), form.serialize(), function() {
            // Refresh calendar to load new user's shifts
            $('#calender').fullCalendar('refetchEvents');
            // Show the selected user alert
            alert("@ViewBag.Message");
        });
    });
</script>

Make sure you've included jQuery, FullCalendar's CSS, and FullCalendar's JS files in your view (you likely already have these set up).

4. Optional: Hide Calendar Until a User is Selected #

Add this to your view to show a message instead of the calendar when no user is chosen:

@if (Session["SelectedUserID"] == null)
{
    <div class="alert alert-info">Please select an employee to view their attendance calendar.</div>
}
else
{
    <h2>Calendar</h2> 
    <div id="calender"></div>
    
    <!-- Keep your existing modals here -->
    <div id="myModal" class="modal fade" role="dialog">
        <!-- ... modal content ... -->
    </div>
    <div id="myModalSave" class="modal fade" role="dialog">
        <!-- ... modal content ... -->
    </div>
}

Now when you select a user and click Submit, FullCalendar will load only that user's login/logout times as events.

内容的提问来源于stack exchange，提问作者Vegetacoding