1.通过npm i @vant/weapp -S --production安装vant

2.在项目的node_modules/@vant/weapp/lib/calendar/calendar.wxml进行修改,给scroll-view新增一个 calendar-outer-self （自定义）样式，同时将scroll-y修改为scroll-x，其他选项不变。

<scroll-view class="van-calendar__body calendar-outer-self" scroll-x scroll-into-view="{{ scrollIntoView }}">
      <month
        wx:for="{{ computed.getMonths(minDate, maxDate) }}"
        wx:key="index"
        id="month{{ index }}"
        class="month"
        data-date="{{ item }}"
        date="{{ item }}"
        type="{{ type }}"
        color="{{ color }}"
        minDate="{{ minDate }}"
        maxDate="{{ maxDate }}"
        showMark="{{ showMark }}"
        formatter="{{ formatter }}"
        rowHeight="{{ rowHeight }}"
        currentDate="{{ currentDate }}"
        showSubtitle="{{ showSubtitle }}"
        allowSameDay="{{ allowSameDay }}"
        showMonthTitle="{{ index !== 0 || !showSubtitle }}"
        bind:click="onClickDay"
      />
    </scroll-view>

3.calendar内部嵌套了month组件，在calendar.wxml的同级目录下，找到 /components/month/index.wxml,给最外层的view标签添加一个month-outer-self(自定义)样式

4.保存以上修改，然后在需要用到calendar横向滑动的组件中的wxss中给calendar-outer-self和month-outer-self添加显示规则即可。

.calendar-outer-self {
    white-space: nowrap !important;
}

.month-outer-self {
    display: inline-block !important;
}

5，效果