布局日历事件的解决方法可以通过以下代码示例来实现：

1. 使用HTML和CSS布局日历事件的外观：

  
事件1
  
事件2
  
事件3

.calendar {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.event {
  background-color: #f1f1f1;
  margin-bottom: 10px;
  padding: 5px;
}

2. 使用JavaScript动态生成日历事件：

#calendar {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.event {
  background-color: #f1f1f1;
  margin-bottom: 10px;
  padding: 5px;
}

var events = ['事件1', '事件2', '事件3'];

var calendar = document.getElementById('calendar');

events.forEach(function(event) {
  var eventDiv = document.createElement('div');
  eventDiv.classList.add('event');
  eventDiv.textContent = event;
  calendar.appendChild(eventDiv);
});

这样，我们就可以通过样式和JavaScript代码来布局和动态生成日历事件。你可以根据需要进行修改和扩展。